ayoreis/import

A dynamic imports polyfill for Deno Deploy and compiled executables

👋 Hello, 🌍 world!
I'm Ayo,
I make/do stuff/things.

import's Issues

Module source is being botched by mod.ts:95-101

I'm trying to work around the dynamic import issue with Deno Deploy (denoland/deploy_feedback#1) and I'm getting the following error when using importModule vs. native import:

SyntaxError: Unexpected token 'default'
    at AsyncFunction (<anonymous>)
    at buildAndEvaluate (https://deno.land/x/[email protected]/mod.ts:58:12)
    at async importModule (https://deno.land/x/[email protected]/mod.ts:70:16)
    at async getNotebook (file:///src/observable.ts:30:31)

I'm trying to dynamically import Observable notebooks. It works fine when running the Deno script locally and using native import.

Here's an example: https://api.observablehq.com/d/6388e91a5ea79803.js?v=3

The source is importing with native import or when you fetch this is:

function _1(md){return(
md`# Deno Function Test`
)}

function _addTwo(){return(
x => x + 2
)}

function _result(addTwo){return(
addTwo(2)
)}

export default function define(runtime, observer) {
  const main = runtime.module();
  main.variable(observer()).define(["md"], _1);
  main.variable(observer("addTwo")).define("addTwo", _addTwo);
  main.variable(observer("result")).define("result", ["addTwo"], _result);
  return main;
}

However, what I'm seeing for body at AsyncFunction (mod.ts:103) is:

// deno:https://api.observablehq.com/d/6388e91a5ea79803.js?v=3&api_key=a9cb22008fc47c23b8bc2d0dc269949b1d1aaeee&cache=1670648818850
function _1(md) {
  return md`# Deno Function Test`;
}
function _addTwo() {
  return (x) => x + 2;
}
function _result(addTwo) {
  return addTwo(2);
}
function define(runtime, observer) {
  const main = runtime.module();
  main.variable(observer()).define(["md"], _1);
  main.variable(observer("addTwo")).define("addTwo", _addTwo);
  main.variable(observer("result")).define("result", ["addTwo"], _result);
  return main;
}
return {default
};
: 
  define

It appears that this is the culprit: https://github.com/ayoreis/import/blob/main/mod.ts#L95-L101

Could this package possible work in combination with `deno compile`

I know the README explicetely states that it is inteded for use with deno deploy. However I was wondering if this could also be used to support dynamic imports for a deno compiled application, since deno doesn't allow dynamic imports since two years after opening the issue .

I couldn't get importModule to work at all, however importString seemed to work at first, but when I compile my application I get

ERROR: [plugin: deno] Failed to call 'deno info' on 'https://denopkg.dev/gh/danielr1996/bumpup@main/packages/log/mod.ts'
    {
      detail: Error: Failed to call 'deno info' on 'https://denopkg.dev/gh/danielr1996/bumpup@main/packages/log/mod.ts'
        at Module.info (https://deno.land/x/[email protected]/src/deno.ts:26:19)
        at async loadFromCLI (https://deno.land/x/[email protected]/src/native_loader.ts:24:42)
        at async load (https://deno.land/x/[email protected]/src/native_loader.ts:9:20)
        at async callback (https://deno.land/x/[email protected]/wasm.js:973:28)
        at async handleRequest (https://deno.land/x/[email protected]/wasm.js:701:30),
      id: "",
      location: {
        column: 18,
        file: "file:///C:/Users/danie/Documents/Entwicklung/bumpup",
        length: 68,
        line: 1,
        lineText: 'import {log} from "https://denopkg.dev/gh/danielr1996/bumpup@main/packages/log/mod.ts";',
        namespace: "",
        suggestion: ""
      },
      notes: [],
      pluginName: "deno",
      text: "Failed to call 'deno info' on 'https://denopkg.dev/gh/danielr1996/bumpup@main/packages/log/mod.ts'"
    }

As it seems indeed esbuild is used to compile the string instead of the dynamic data uri import. deno info works locally for me

$ deno info https://denopkg.dev/gh/danielr1996/bumpup@main/packages/log/mod.ts
local: C:\Users\danie\AppData\Local\deno\deps\https\denopkg.dev\649ed91de23002ed1a193a9522b3f0538bd7d6a726bfdb033defe48d62c502e8
emit: C:\Users\danie\AppData\Local\deno\gen\https\denopkg.dev\649ed91de23002ed1a193a9522b3f0538bd7d6a726bfdb033defe48d62c502e8.js
type: TypeScript
dependencies: 3 unique (total 1.03KB)

https://denopkg.dev/gh/danielr1996/bumpup@main/packages/log/mod.ts (53B)
└─┬ https://denopkg.dev/gh/danielr1996/bumpup@main/packages/log/src/log.ts (363B)
  └─┬ https://denopkg.dev/gh/danielr1996/bumpup@main/packages/log/deps.ts (60B)
    └── https://denopkg.dev/gh/danielr1996/bumpup@main/packages/cli/src/lib/types.ts (

so im unsure why this error gets thrown.

I will look further into esbuild, maybe this provides a solution to my problem, but it would be really nice if this library could be used to use dynamic imports with deno compile

Using `importModule` inside `importString`

I have a use case where I need to import other modules from a JS string:

import { importString, importModule } from "https://deno.land/x/import/mod.ts";

let code = `
const renderer = async ()=>{
    const { render } = await importModule('https://deno.land/x/mustache_ts/mustache.ts');
    console.log(render)
    const template = '{{title}} spends {{calc}}'
    const view = {
        title: 'Joe',
        calc: () => 2 + 4
    }
    const output = render(template, view)
    return output
}
export default renderer
`

const {default:renderer} = await importString(code);
renderer().then(console.log) // expected: "Joe spends 6

Possible solution: passing an object of "dependencies" to the "importString" function as a second parameter, in which we could use the importModule or even other custom modules as well.

loads incorrect file

Calling await importModule("./MY_FILE.ts") loads https://deno.land/x/[email protected]/MY_FILE.ts instead of local file MY_FILE.ts. Native dynamic import works fine. How can i fix this? (Deno 1.29.4 on Arch linux)

Strange behavior while importing react

I have a different use case, where I build my SSR react entry-server.tsx using Vite (either with noExternals or with externals), then try to dynamically import it into Deno, but what happens is that it while processing the output from esbuild it doesn't find some React part, for instance useState that is being used by some component.

Not sure if esbuild is treeShaking my files the output in this case, but in any case I can't correctly import my module. Any advice?

Browser support

GoogleChromeLabs/dynamic-import-polyfill
uupaa/dynamic-import-polyfill
guybedford/es-module-shims

Cache result with KV

https://deno.land/[email protected]/runtime/kv

Return instance of `Module` instead of plain object

So that when logging it results in this: Module { foo: "bar" } instead of { foo: "bar" }.

I there a better way of doing this?

Add `assert` option to `importModule`

tc39/proposal-import-assertions