Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ide-extension fails to import dynamically #452

Closed
openscript opened this issue Mar 17, 2023 · 13 comments · Fixed by #845
Closed

ide-extension fails to import dynamically #452

openscript opened this issue Mar 17, 2023 · 13 comments · Fixed by #845
Assignees
Labels
scope: inlang/sherlock-vscode Related to source-code/ide-extension. type: bug Something isn't working

Comments

@openscript
Copy link
Contributor

openscript commented Mar 17, 2023

Problem

image

[error] TypeError: A dynamic import callback was not specified.
	at new NodeError (node:internal/errors:371:5)
	at importModuleDynamicallyCallback (node:internal/process/esm_loader:39:9)
	at main (/home/user/.vscode/extensions/inlang.vs-code-extension-0.4.3/dist/main-186ff56f.cjs:7379:20)

Steps to reproduce

Load production build of ide-extension in VSCode and start it.

Expected behavior

Imports dynamically

Additional information

https://stackoverflow.com/questions/75002605/vscode-extension-a-dynamic-import-callback-was-not-specified
microsoft/vscode#152052 leads to microsoft/vscode#130367
https://stackoverflow.com/questions/70620025/how-do-i-import-an-es6-javascript-module-in-my-vs-code-extension-written-in-type
https://gist.github.com/samthor/3ff82bd5b11314fec2e1826d4a96ce7c
https://github.com/uupaa/dynamic-import-polyfill
https://github.com/GoogleChromeLabs/dynamic-import-polyfill
https://github.com/rich-harris/shimport
microsoft/vscode#166265

@openscript openscript added type: bug Something isn't working scope: inlang/sherlock-vscode Related to source-code/ide-extension. labels Mar 17, 2023
@openscript openscript self-assigned this Mar 17, 2023
@felixhaeberle
Copy link
Contributor

@openscript @samuelstroschein It works now 🎉
Now it's only about waiting for the vscode team to release the next version – they want to ship early May (first week).
see this: microsoft/vscode#178951

Tested with these specs:

Version: 1.78.0-insider (Universal)
Commit: 208bbb0d788cce3eb80799e3565ee2204391b86d
Datum: 2023-04-20T05:22:30.460Z (Vor 5 Stunde(n))
Electron: 22.4.7
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
Betriebssystem: Darwin arm64 22.4.0
Sandkasten: Yes

and this config file:

// @ts-check

/**
 * @type { import("@inlang/core/config").DefineConfig }
 */
export async function defineConfig(env) {
  const plugin = await env.$import(
    "https://cdn.jsdelivr.net/gh/samuelstroschein/inlang-plugin-json@1/dist/index.js"
  );

  const { standardLintRules } = await env.$import(
    "https://cdn.jsdelivr.net/gh/inlang/standard-lint-rules@1/dist/index.js"
  );

  const pluginConfig = {
    pathPattern: "./resources/{language}.json",
  };

  return {
    referenceLanguage: "en",
    languages: await plugin.getLanguages({ ...env, pluginConfig }),
    readResources: (args) => plugin.readResources({ ...args, ...env, pluginConfig }),
    writeResources: (args) => plugin.writeResources({ ...args, ...env, pluginConfig }),
    lint: {
      rules: [standardLintRules()],
    },
    ideExtension: {
      messageReferenceMatchers: [
        async ( /** @type {{ "documentText": string; }} */ args) => {
          const regex = /(?<!\w){?t\(['"](?<messageId>\S+)['"]\)}?/gm;
          const str = args.documentText;
          let match;
          const result = [];

          while ((match = regex.exec(str)) !== null) {
            const startLine =
              (str.slice(0, Math.max(0, match.index)).match(/\n/g) || [])
              .length + 1;
            const startPos =
              match.index - str.lastIndexOf("\n", match.index - 1);
            const endPos =
              match.index +
              match[0].length -
              str.lastIndexOf("\n", match.index + match[0].length - 1);
            const endLine =
              (
                str
                .slice(0, Math.max(0, match.index + match[0].length))
                .match(/\n/g) || []
              ).length + 1;

            if (match.groups && "messageId" in match.groups) {
              result.push({
                messageId: match.groups["messageId"],
                position: {
                  start: {
                    line: startLine,
                    character: startPos,
                  },
                  end: {
                    line: endLine,
                    character: endPos,
                  },
                },
              });
            }
          }
          return result;
        },
      ],
      extractMessageOptions: [{
          callback: (messageId) => `{t("${messageId}")}`,
        },
        {
          callback: (messageId) => `t("${messageId}")`,
        },
      ],
    },
  };
}

@felixhaeberle
Copy link
Contributor

this can be closed due to the latest vs code release. 🎉

Bildschirmfoto 2023-05-08 um 07 45 36

@felixhaeberle
Copy link
Contributor

Turns out this is not yet fixed as the issue is still open & not working in production.

microsoft/vscode#130367

@felixhaeberle felixhaeberle reopened this May 15, 2023
@samuelstroschein
Copy link
Member

samuelstroschein commented May 15, 2023

The immediate (and maybe only solution) that I can think of:

  1. Use a custom $import in the ide extension that:
  2. Transpiles code imported by $import to commonjs.
  3. Uses require(transpiledCode) instead of import.

That workaround is heavy but it might work. Potential problems:

  • require doesn't support data imports -> create a .inlang folder that stores the imports as actual files

@felixhaeberle
Copy link
Contributor

felixhaeberle commented May 15, 2023

@samuelstroschein I implemented this (6994510) as suggested and this surprisingly works, but now I'm getting the "Invalid host defined options" from other sources.

Bildschirmfoto 2023-05-15 um 16 42 41

And after manually saving the main.cjs file to get a better line number for debugging, this is what causes the error:

Bildschirmfoto 2023-05-15 um 16 47 36 Bildschirmfoto 2023-05-15 um 16 49 37

@samuelstroschein
Copy link
Member

@felixhaeberle See my comment 6994510#r113406606

@felixhaeberle
Copy link
Contributor

the transpiled config output look like this, just in case this is interesting:

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.defineConfig = void 0;
/**
 * @type { import("@inlang/core/config").DefineConfig }
 */
function defineConfig(env) {
    return __awaiter(this, void 0, void 0, function* () {
        const { default: jsonPlugin } = yield env.$import("https://cdn.jsdelivr.net/gh/samuelstroschein/inlang-plugin-json@2/dist/index.js");
        const { default: sdkPlugin } = yield env.$import("https://cdn.jsdelivr.net/npm/@inlang/[email protected]/dist/index.js");
        const { default: ideExtensionPlugin } = yield env.$import("https://cdn.jsdelivr.net/npm/@inlang/ide-extension-plugin@latest/dist/index.js");
        return {
            referenceLanguage: "en",
            plugins: [
                jsonPlugin({
                    pathPattern: "./languages/{language}.json",
                }),
                sdkPlugin({
                    languageNegotiation: {
                        strategies: [{ type: "url" }],
                    },
                }),
                ideExtensionPlugin(),
            ],
        };
    });
}
exports.defineConfig = defineConfig;

@felixhaeberle
Copy link
Contributor

Sadly, also after a complete import refactor, this doesn't work.

Bildschirmfoto 2023-05-15 um 18 53 38

@samuelstroschein
Copy link
Member

@felixhaeberle should I try to take over this issue?

Pros

  • I might be able to fix it faster / this week. Given that you are OOO for the rest of the week, we can push the extension out faster.

Neutral

Cons

  • I want you to be in charge of the IDE extension. Jumping in to solve issues seems to mix ownership. But, this issue seems deep and of high importance to finally get the ide extension running.

@felixhaeberle
Copy link
Contributor

@samuelstroschein I'm in the office until Wednesday afternoon. But you taking this over would benefit from seeing a solution from a new angle.

I can take over machine translate on the CLI and see how far I can take it tomorrow. 👍

I don't see a ownership problem 🤲

I know my way around the extension very good already and are totally into developing it further, but this build bug is killing me right now. Invested a whole day into it.

@samuelstroschein
Copy link
Member

@felixhaeberle Okay, I take over this bug and assign you the CLI command.

@github-project-automation github-project-automation bot moved this from In Progress to Done in ide-extension BETA till 10th July May 26, 2023
@felixhaeberle
Copy link
Contributor

@samuelstroschein thank you for fixing this 😊

@samuelstroschein
Copy link
Member

@felixhaeberle you're welcome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: inlang/sherlock-vscode Related to source-code/ide-extension. type: bug Something isn't working
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

3 participants