Stencil Compiler POC (codesandbox#2203)

* Stencil POC

* Base version of compiler from dependencies

* Use imports info from stencil compiler

* remove setting everything to stencil

* remove import

* fix lint


Co-authored-by: Sara Vieira <[email protected]>

Author: CompuIves

packages/app/src/sandbox/eval/presets/stencil/index.js

@@ -0,0 +1,42 @@
+import babelTranspiler from '../../transpilers/babel';
+import jsonTranspiler from '../../transpilers/json';
+import rawTranspiler from '../../transpilers/raw';
+import stencilTranspiler from '../../transpilers/stencil';
+
+import Preset from '..';
+
+const babelOptions = {
+  isV7: true,
+  config: {
+    presets: [],
+    plugins: ['@babel/plugin-syntax-import-meta'],
+    parserOpts: {
+      plugins: ['dynamicImport', 'objectRestSpread', 'importMeta'],
+    },
+  },
+};
+
+export default function initialize() {
+  const stencilPreset = new Preset(
+    'stencil',
+    ['js', 'ts', 'jsx', 'tsx', 'mjs'],
+    {}
+  );
+
+  stencilPreset.registerTranspiler(module => /\.(t|j)sx?$/.test(module.path), [
+    { transpiler: stencilTranspiler },
+  ]);
+
+  stencilPreset.registerTranspiler(module => /\.mjs$/.test(module.path), [
+    { transpiler: stencilTranspiler },
+    { transpiler: babelTranspiler, options: babelOptions },
+  ]);
+
+  stencilPreset.registerTranspiler(module => /\.json$/.test(module.path), [
+    { transpiler: jsonTranspiler },
+  ]);
+
+  stencilPreset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]);
+
+  return stencilPreset;
+}

packages/app/src/sandbox/eval/transpilers/stencil/index.ts

@@ -0,0 +1,65 @@
+// @ts-ignore
+import StencilWorker from 'worker-loader?publicPath=/&name=stencil-transpiler.[hash:8].worker.js!./stencil-worker.ts';
+
+import WorkerTranspiler from '../worker-transpiler';
+import { LoaderContext } from '../../transpiled-module';
+import { TranspilerResult } from '..';
+
+const DEFAULT_STENCIL_VERSION = '1.2.0-1';
+
+const getStencilVersion = (packageJSON: any) => {
+  if (!packageJSON || !packageJSON.parsed) {
+    return DEFAULT_STENCIL_VERSION;
+  }
+
+  const testVersion = (parsed, keyToCheck): string | undefined =>
+    parsed[keyToCheck] && parsed[keyToCheck]['@stencil/core'];
+
+  return (
+    testVersion(packageJSON.parsed, 'dependencies') ||
+    testVersion(packageJSON.parsed, 'devDependencies') ||
+    DEFAULT_STENCIL_VERSION
+  );
+};
+
+class StencilTranspiler extends WorkerTranspiler {
+  worker: Worker;
+
+  constructor() {
+    super('stencil-loader', StencilWorker, 2);
+  }
+
+  doTranspilation(code: string, loaderContext: LoaderContext) {
+    return new Promise<TranspilerResult>((resolve, reject) => {
+      const path = loaderContext.path;
+      const packageJSON = loaderContext.options.configurations.package;
+
+      const stencilVersion = getStencilVersion(packageJSON);
+
+      this.queueTask(
+        {
+          code,
+          path,
+          stencilVersion,
+        },
+        loaderContext._module.getId(),
+        loaderContext,
+        (err, data) => {
+          if (err) {
+            loaderContext.emitError(err);
+
+            return reject(err);
+          }
+
+          return resolve(data);
+        }
+      );
+    });
+  }
+}
+
+const transpiler = new StencilTranspiler();
+
+export { StencilTranspiler };
+
+export default transpiler;

packages/app/src/sandbox/eval/transpilers/stencil/stencil-worker.ts

@@ -0,0 +1,42 @@
+const ctx = self as any;
+
+let loadedStencilVersion: string;
+const loadStencilVersion = (version: string) => {
+  if (version !== loadedStencilVersion) {
+    loadedStencilVersion = version;
+
+    ctx.importScripts(
+      `https://unpkg.com/@stencil/core@${version}/compiler/stencil.js`
+    );
+  }
+};
+
+ctx.importScripts('https://unpkg.com/[email protected]/lib/typescript.js');
+ctx.postMessage('ready');
+
+ctx.addEventListener('message', event => {
+  const { code, path, stencilVersion } = event.data;
+
+  loadStencilVersion(stencilVersion);
+
+  const opts = {
+    file: path,
+    module: 'cjs',
+  };
+
+  ctx.stencil.compile(code, opts).then(results => {
+    results.imports.forEach(dependency => {
+      ctx.postMessage({
+        type: 'add-dependency',
+        path: dependency.path,
+        isGlob: false,
+      });
+    });
+
+    ctx.postMessage({
+      type: 'result',
+      // Code won't execute with an import.meta in the code, so removing it now as a hack
+      transpiledCode: results.code.replace(/^.*import\.meta.*$/gm, ''),
+    });
+  });
+});