working webpack

algorandfoundation · Jan 5, 2024 · d87ec82 · d87ec82
1 parent b3b28d5
commit d87ec82
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 4 deletions.
diff --git a/tests/web/index.html b/tests/web/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+
+<body>
+    <script src="dist/main.js"></script>
+    <h1>App Spec</h1>
+    <span style="white-space: pre-wrap" id="appspec">Loading appspec...</span>
+    <h1>TEAL</h1>
+    <span style="white-space: pre-wrap" id="teal">Loading teal...</span>
+
+</body>
+
+</html>
diff --git a/tests/web/index.ts b/tests/web/index.ts
@@ -1,3 +1,6 @@
+import { Project } from 'ts-morph';
+import fetch from 'node-fetch';
+import { VERSION } from '../../src/version';
 import Compiler from '../../src/lib/compiler';
 
 const CALCULATOR = `import { Contract } from '../../src/lib/index';
@@ -49,10 +52,46 @@ class Calculator extends Contract {
 }`;
 
 async function main() {
-  const compiler = new Compiler(CALCULATOR, 'Calculator', { disableWarnings: true });
+  // Step One: Create a ts-morph project with an in-memory file system
+  const project = new Project({
+    // useInMemoryFileSystem must be true in a browser environment
+    useInMemoryFileSystem: true,
+    // TEALScript requires experimentalDecorators to be enabled
+    compilerOptions: { experimentalDecorators: true },
+  });
+
+  // Step Two: Add the source to the project
+  const srcPath = 'examples/calculator/calculator.algo.ts';
+  project.createSourceFile(srcPath, CALCULATOR);
+
+  // Step Three: Add TEALScript files to the project
+  const libDir = 'src/lib';
+
+  const indexPath = `${libDir}/index.ts`;
+  const typesPath = 'types/global.d.ts';
+  const contractPath = `${libDir}/contract.ts`;
+  const lsigPath = `${libDir}/lsig.ts`;
+  const compilerPath = `${libDir}/compiler.ts`;
+
+  const promises = [indexPath, typesPath, contractPath, lsigPath, compilerPath].map(async (p) => {
+    const response = await fetch(`https://raw.githubusercontent.com/algorandfoundation/TEALScript/${VERSION}/${p}`);
+    const text = await response.text();
+    project.createSourceFile(p, text);
+  });
+
+  await Promise.all(promises);
+
+  const compiler = new Compiler({
+    srcPath,
+    className: 'Calculator',
+    project,
+    cwd: '/',
+  });
   await compiler.compile();
   await compiler.algodCompile();
-  await compiler.appSpec();
+
+  document.getElementById('teal').innerHTML = compiler.teal.approval.map((a) => a.teal).join('\n');
+  document.getElementById('appspec').innerHTML = JSON.stringify(compiler.appSpec(), null, 2);
 }
 
 main();
diff --git a/tests/web/webpack.config.js b/tests/web/webpack.config.js
@@ -1,9 +1,10 @@
 // Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 const path = require('path');
+const webpack = require('webpack');
 
 const config = {
-  entry: './tests/web/index.ts',
+  entry: path.resolve(__dirname, 'index.ts'),
   output: {
     path: path.resolve(__dirname, 'dist'),
   },
@@ -15,13 +16,19 @@ const config = {
         exclude: ['/node_modules/'],
       },
     ],
-    noParse: [require.resolve('typescript/lib/typescript.js')],
+    noParse: [require.resolve('@ts-morph/common/dist/typescript.js')],
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  ],
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
     fallback: {
       fs: false,
       path: require.resolve('path-browserify'),
+      buffer: require.resolve('buffer/'),
     },
   },
 };