Giter Club home page Giter Club logo

Comments (10)

josemarluedke avatar josemarluedke commented on August 16, 2024 2

I believe that the TS removing the imports also prevents template imports to work in ember with TS. So, fixing support for TS would be the best approach instead of not having TS support at all.

from glimmer.js.

lifeart avatar lifeart commented on August 16, 2024

may be an issue in https://github.com/ember-cli/babel-plugin-htmlbars-inline-precompile

https://github.com/ember-cli/babel-plugin-htmlbars-inline-precompile/blob/9a963f27bf1f2f11391dd3f90c5f78ff5944c94b/src/preprocess-embedded-templates.ts#L199

looks like plugin does not handle case with template as static property and external component import

from glimmer.js.

lifeart avatar lifeart commented on August 16, 2024

workaround before transform to get it working

 const imports = parseStaticImports(code).filter(e => {
        return e.moduleName.startsWith('@glimmerx/modifier') || !e.moduleName.startsWith("@");
      }).map((el) => [...el.namedImports.map(e => e.alias), el.defaultImport]).reduce((acc, items) => {
        return acc.concat(items);
      }, []);
      
      code = `
        ${code};
        //
        [${imports.map(e => `${e}`).join(',')}];
      `;

from glimmer.js.

lifeart avatar lifeart commented on August 16, 2024

problem in this function: https://github.com/ember-cli/babel-plugin-htmlbars-inline-precompile/blob/master/index.js#L142

because imported template is not binded to the scope

// this implementation of getScope solves missing scope lookup

  function getScope(scope) {
    let names = Object.keys(scope.references);

    while (scope) {
      
      for (let binding in scope.bindings) {
        names.push(binding);
      }

      if (!scope.parent) {
        Object.keys(scope.references).forEach((ref) => {
          if (!names.includes(ref)) {
            names.push(ref);
          }
        });
      }

      scope = scope.parent;
    }

    return names;
  }

but not solve final problem

from glimmer.js.

lifeart avatar lifeart commented on August 16, 2024
diff --git a/node_modules/babel-plugin-htmlbars-inline-precompile/index.js b/node_modules/babel-plugin-htmlbars-inline-precompile/index.js
index 700b3d6..29d9316 100644
--- a/node_modules/babel-plugin-htmlbars-inline-precompile/index.js
+++ b/node_modules/babel-plugin-htmlbars-inline-precompile/index.js
@@ -143,6 +143,14 @@ module.exports = function (babel) {
         names.push(binding);
       }
 
+      if (!scope.parent) {
+        Object.keys(scope.references).forEach((ref) => {
+          if (!names.includes(ref)) {
+            names.push(ref);
+          }
+        });
+      }
+
       scope = scope.parent;
     }
 

from glimmer.js.

lifeart avatar lifeart commented on August 16, 2024

next issue we have:

on modifier import is removed after compilation, but scope referencing to it

input:

import Component, { hbs } from '@glimmerx/component';
import { on, action } from '@glimmerx/modifier';
export default class App extends Component {
    updateValue() { console.log(1) }
    static template = hbs`
        <input {{on 'input' this.updateValue}} />
    `;
}

compiled output:

import { setComponentTemplate as _setComponentTemplate } from "@glimmer/core";  
import { createTemplateFactory as _createTemplateFactory } from "@glimmer/core";
import Component from '@glimmerx/component';
export default class App extends Component {
  updateValue() {
    console.log(1);
  }

}

_setComponentTemplate(_createTemplateFactory(
/*

        <input {{on 'input' this.updateValue}} />

*/
{
  "id": "HHfcxqIY",
  "block": "[[[1,\"\\n        \"],[11,\"input\"],[4,[32,0],[\"input\",[30,0,[\"updateValue\"]]],null],[12],[13],[1,\"\\n    \"]],[],false,[]]",        
  "moduleName": "(unknown template module)",
  "scope": () => [on],
  "isStrictMode": true
}), App);

if I import { action, on } from @glimmerx/modifier;

I have only { action } after template compilation:

image

If I replace @glimmerx with @glimmer:

image

from glimmer.js.

lifeart avatar lifeart commented on August 16, 2024

looks like issue in @babel/preset-typescript, it's removing unused imports, may be related issue: babel/babel#9723
// https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAMwhRUIjgciRTBuAKAIFMAPSWOAE2IQEMBXAG3gGMm6BnTuAMWQBGdKHADeAXyA

possible workaround: not use ts, or parse TS -> apply hbs transform -> print ts,

from glimmer.js.

lifeart avatar lifeart commented on August 16, 2024

@josemarluedke I have one workaround for vite, collecting all imports before ast transform and appending all imports to array, to prevent ts deleting it.

import { transformSync } from "@babel/core";

import babelGlimmerPreset from "@glimmerx/babel-preset";
import tsPreset from "@babel/preset-typescript";
import parseStaticImports from "parse-static-imports";

const templateFileRegex = /\.(hbs)$/;
const fixDelimiter = '// [will-be-removed]';

export default function vitePluginBabelImport(
  plgOptions
) {
  let viteConfig;
  return {
    name: 'vite:glimmerx',
    enforce: 'pre',
    configResolved(resolvedConfig) {
      viteConfig = resolvedConfig;
    },

    transform(rawCode, id) {
      let code = rawCode;
      if (templateFileRegex.test(id)) {
        code = `
          import { hbs } from '@glimmerx/component';
          export default hbs\`${rawCode.trim()}\`;
        `.trim();
      } else if (!id.endsWith('.ts') && !id.endsWith('.js')) {
        return;
      }
      
      const imports = parseStaticImports(code).filter(e => {
        return e.moduleName.startsWith('@glimmerx/') || !e.moduleName.startsWith("@");
      }).map((el) => [...el.namedImports.map(e => e.alias), el.defaultImport]).reduce((acc, items) => {
        return acc.concat(items);
      }, []);
      
      code = `
        ${code};
        ${fixDelimiter}
        [${imports.map(e => `${e}`).join(',')}];
      `;

      const result = transformSrcCode(code, id, plgOptions, viteConfig);

      return {
        code: result.split(fixDelimiter)[0].trim(),
        map: null,
      };
    },
  };
}


function transformSrcCode(code, fileName, plgOptions, viteConfig) {
    let result = transformSync(code, {
        sourceType: "module",
        babelrc: false,
        configFile: false,
        envName: viteConfig.mode,
        filename: fileName,
        presets: [tsPreset, function(api, opts) {
            return babelGlimmerPreset(api, {...opts, ...{
                isDebug: !viteConfig.isProduction
            }})
        }]
    });
    return result.code;
}

from glimmer.js.

knownasilya avatar knownasilya commented on August 16, 2024

What needs resolving to make this preset work for TS?

from glimmer.js.

lifeart avatar lifeart commented on August 16, 2024

@knownasilya with latest TS compiler, new flag introduced, to not delete "not used" imports. It should help (but i'm did not tryied)

from glimmer.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.