trying to run ember-eui

explore - sub expressions in on modifier word boundary replacement fix compiler, add helper/modifier/component helpers better modifiers EuiAccordion, EuiPanel pretty plugin + + carrying args exploration + +
lifeart · Feb 2, 2024 · fdfc8ac · fdfc8ac
1 parent 78d709b
commit fdfc8ac
Show file tree

Hide file tree

Showing 55 changed files with 4,686 additions and 195 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,9 @@
     <link rel="stylesheet" href="/src/style.css" />
   </head>
   <body>
+    <script>
+      window.global = window;
+    </script>
     <div id="app"><!--ssr-outlet--></div>
     <script type="module">
       import App from "/src/index.ts";

diff --git a/package.json b/package.json
@@ -66,12 +66,23 @@
   "devDependencies": {
     "@glint/core": "^1.3.0",
     "@glint/template": "^1.3.0",
+    "@babel/core": "^7.23.6",
+    "@babel/plugin-syntax-decorators": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/standalone": "^7.23.8",
+    "@ember-eui/core": "^8.0.4",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@glint/environment-ember-template-imports": "^1.2.1",
+    "@glint/environment-glimmerx": "^1.2.1",
     "@lifeart/tiny-router": "^0.0.8",
     "@playwright/test": "^1.40.1",
     "@types/babel__core": "^7.20.5",
     "@types/qunit": "^2.19.9",
     "autoprefixer": "^10.4.16",
+    "babel-import-util": "^2.0.1",
     "backburner.js": "^2.8.0",
+    "express": "^4.18.2",
+    "happy-dom": "^13.0.6",
     "nyc": "^15.1.0",
     "postcss": "^8.4.33",
     "prettier": "^3.1.1",
@@ -90,8 +101,6 @@
     "vite-plugin-dts": "^3.7.0",
     "vitest": "^1.1.1",
     "zx": "^7.2.3",
-    "express": "^4.18.2",
-    "happy-dom": "^13.0.6",
     "glint-environment-gxt": "file:./glint-environment-gxt"
   },
   "dependencies": {

diff --git a/plugins/babel.ts b/plugins/babel.ts
@@ -104,7 +104,8 @@ export function processTemplate(
             );
           }
         },
-        CallExpression(path: any) {
+        // @ts-expect-error context is not used
+        CallExpression(path: any, context: Context) {
           if (path.node.callee && path.node.callee.type === 'Identifier') {
             if (path.node.callee.name === 'scope') {
               path.remove();
@@ -122,6 +123,24 @@ export function processTemplate(
                   path.node.arguments.pop();
                 }
               }
+            } else if (path.node.callee.name === 'precompileTemplate') {
+              // const template = path.node.arguments[0].quasis[0].value
+              //   .raw as string;
+              // const isInsideClassBody = context.isInsideClassBody === true;
+              // const hasThisInTemplate = template.includes('this');
+              // let hasThisAccess =
+              //   isInsideClassBody === true || hasThisInTemplate;
+              // // looks like it's function based template, we don't need to mess with it's context hell
+              // if (context.isInsideReturnStatement === true) {
+              //   hasThisAccess = true;
+              // }
+              // hbsToProcess.push({
+              //   template,
+              //   flags: {
+              //     hasThisAccess: hasThisAccess,
+              //   },
+              // });
+              // path.replaceWith(t.identifier('$placeholder'));
             }
           }
         },

diff --git a/plugins/compiler.ts b/plugins/compiler.ts
@@ -1,7 +1,7 @@
 import { type Plugin } from 'vite';
 import { Preprocessor } from 'content-tag';
 import { transform } from './test';
-import { MAIN_IMPORT } from './symbols';
+// import { MAIN_IMPORT } from './symbols';
 import { type Flags, defaultFlags } from './flags.ts';
 import { HMR, fixExportsForHMR, shouldHotReloadFile } from './hmr.ts';
 
@@ -50,6 +50,7 @@ export function compiler(mode: string, options: Options = {}): Plugin {
       } else {
         defineValues = {};
       }
+      defineValues['process.env.BABEL_TYPES_8_BREAKING'] = false;
 
       return {
         define: defineValues,
@@ -83,12 +84,15 @@ export function compiler(mode: string, options: Options = {}): Plugin {
           );
         }
       }
-      if (!code.includes(MAIN_IMPORT)) {
-        return;
-      }
+      // if (!code.includes(MAIN_IMPORT)) {
+      //   return;
+      // }
       let result: string | undefined = undefined;
       if (scriptFileRegex.test(file)) {
         const source = code;
+        // if (code.includes('precompileTemplate')) {
+        //   console.log(code);
+        // }
         const result = transform(
           source,
           file,

diff --git a/plugins/converter.test.ts b/plugins/converter.test.ts
@@ -508,6 +508,14 @@ describe.each([
           }),
         );
       });
+      test('support helper as on modifier argument', () => {
+        expect($t<ASTv1.ElementNode>(`<div {{on "click" (optional tab.onClick)}}></div>`)).toEqual(
+          $node({
+            tag: 'div',
+            events: [['click', $mm('foo-bar')]],
+          }),
+        );
+      });
       test('support custom modifiers with params ', () => {
         expect(
           $t<ASTv1.ElementNode>(

diff --git a/plugins/converter.ts b/plugins/converter.ts
@@ -1,4 +1,4 @@
-import type { ASTv1 } from '@glimmer/syntax';
+import { type ASTv1 } from '@glimmer/syntax';
 import {
   type HBSControlExpression,
   type HBSNode,
@@ -395,11 +395,16 @@ export function convert(
         return result;
       }
 
+      const params = node.program.blockParams;
+      if (params.length === 0) {
+        params.push('$noop');
+      }
+
       return {
         type: name,
         isControl: true,
         condition: serializePath(ToJSType(node.params[0]) as string),
-        blockParams: node.program.blockParams,
+        blockParams: params,
         isSync: syncValue,
         children: children,
         inverse: inverse,
@@ -501,13 +506,24 @@ export function convert(
           if (mod.path.original === 'on') {
             const firstParam = mod.params[0];
             if (firstParam.type === 'StringLiteral') {
-              return [
-                firstParam.original,
+              if (mod.params[1].type === 'SubExpression') {
+                return [
+                  firstParam.original,
                 `$:($e, $n) => ${ToJSType(mod.params[1])}($e, $n, ${mod.params
                   .slice(2)
                   .map((p) => ToJSType(p))
                   .join(',')})`,
-              ];
+                ];
+              } else {
+                return [
+                  firstParam.original,
+                  `$:($e, $n) => ${ToJSType(mod.params[1])}([$e, $n, ${mod.params
+                    .slice(2)
+                    .map((p) => ToJSType(p))
+                    .join(',')}])`,
+                ];
+              }
+
             } else {
               return null;
             }

diff --git a/plugins/decorator-transforms/globals.ts b/plugins/decorator-transforms/globals.ts
@@ -0,0 +1,2 @@
+import * as runtime from './runtime.ts';
+(globalThis as any)['dt7948'] = runtime;