refactor(compiler): star_exports -> bundle_star_exports

Author: ije

compiler/mod.ts

@@ -43,6 +43,7 @@ export type TransformOptions = {
 export type TransformResult = {
   code: string
   deps: DependencyDescriptor[]
+  bundleStarExports?: string[]
   map?: string
 }
 
@@ -120,7 +121,7 @@ export async function transform(url: string, code: string, options: TransformOpt
   }
 
   const { loaders, ...transformOptions } = options
-  let { code: jsContent, inlineStyles, deps, map } = transformSync(url, code, transformOptions)
+  let { code: jsContent, deps, map, inlineStyles, bundleStarExports } = transformSync(url, code, transformOptions)
 
   // resolve inline-style
   await Promise.all(Object.entries(inlineStyles as InlineStyles).map(async ([key, style]) => {
@@ -165,7 +166,7 @@ export async function transform(url: string, code: string, options: TransformOpt
     jsContent = jsContent.replace(`"%%${key}-placeholder%%"`, '`' + tpl + '`')
   }))
 
-  return { code: jsContent, deps, map }
+  return { code: jsContent, deps, map, bundleStarExports }
 }
 
 /* parse export names of the module */

compiler/src/lib.rs

@@ -99,7 +99,7 @@ pub struct TransformOutput {
   pub map: Option<String>,
   pub deps: Vec<DependencyDescriptor>,
   pub inline_styles: HashMap<String, InlineStyle>,
-  pub star_exports: Vec<String>,
+  pub bundle_star_exports: Option<Vec<String>>,
 }
 
 #[wasm_bindgen(js_name = "parseExportNamesSync")]
@@ -163,7 +163,11 @@ pub fn transform_sync(url: &str, code: &str, options: JsValue) -> Result<JsValue
       map,
       deps: r.dep_graph.clone(),
       inline_styles: r.inline_styles.clone(),
-      star_exports: r.star_exports.clone(),
+      bundle_star_exports: if r.bundle_star_exports.len() > 0 {
+        Some(r.bundle_star_exports.clone())
+      } else {
+        None
+      },
     })
     .unwrap(),
   )

compiler/src/resolve.rs

@@ -19,7 +19,7 @@ lazy_static! {
   )
   .unwrap();
   pub static ref RE_REACT_URL: Regex = Regex::new(
-    r"^https?://(esm.sh/|cdn.esm.sh/v\d+/|esm.x-static.io/v\d+/|jspm.dev/|cdn.skypack.dev/|jspm.dev/npm:|esm.run/)react(\-dom)?(@[\^|~]{0,1}[0-9a-z\.\-]+)?([/|\?].*)?$"
+    r"^https?://(esm.sh/|cdn.esm.sh/v\d+/|cdn.esm.sh.cn/v\d+/|esm.x-static.io/v\d+/)react(\-dom)?(@[\^|~]{0,1}[0-9a-z\.\-]+)?([/|\?].*)?$"
   )
   .unwrap();
 }
@@ -45,20 +45,20 @@ pub struct Resolver {
   pub specifier: String,
   /// a flag indicating if the specifier is remote url or not.
   pub specifier_is_remote: bool,
-  /// builtin jsx tags like `a`, `link`, `head`, etc
-  pub used_builtin_jsx_tags: IndexSet<String>,
   /// dependency graph
   pub dep_graph: Vec<DependencyDescriptor>,
-  /// star exports
-  pub star_exports: Vec<String>,
   /// inline styles
   pub inline_styles: HashMap<String, InlineStyle>,
   /// bundle mode
   pub bundle_mode: bool,
   /// bundled modules
   pub bundle_external: IndexSet<String>,
+  /// bundle star exports
+  pub bundle_star_exports: Vec<String>,
   /// extra imports
   pub extra_imports: IndexSet<String>,
+  /// builtin jsx tags like `a`, `link`, `head`, etc
+  pub used_builtin_jsx_tags: IndexSet<String>,
 
   // private
   import_map: ImportMap,
@@ -84,7 +84,7 @@ impl Resolver {
       specifier_is_remote: is_remote_url(specifier),
       used_builtin_jsx_tags: IndexSet::new(),
       dep_graph: Vec::new(),
-      star_exports: Vec::new(),
+      bundle_star_exports: Vec::new(),
       inline_styles: HashMap::new(),
       import_map: ImportMap::from_hashmap(import_map),
       aleph_pkg_uri,
@@ -108,13 +108,10 @@ impl Resolver {
 
   /// fix import/export url.
   //  - `https://esm.sh/react` -> `/-/esm.sh/react.js`
-  //  - `https://esm.sh/[email protected]?target=es2015&dev` -> `/-/esm.sh/[email protected].1_target=es2015&dev.js`
+  //  - `https://esm.sh/[email protected]?target=es2015&dev` -> `/-/esm.sh/[base64('target=es2015&dev')][email protected].1.js`
   //  - `http://localhost:8080/mod` -> `/-/http_localhost_8080/mod.js`
-  //  - `/components/logo.tsx` -> `/components/logo.tsx`
-  //  - `../components/logo.tsx` -> `../components/logo.tsx`
-  //  - `./button.tsx` -> `./button.tsx`
-  //  - `/components/foo/./logo.tsx` -> `/components/foo/logo.tsx`
-  //  - `/components/foo/../logo.tsx` -> `/components/logo.tsx`
+  //  - `/components/x/./logo.tsx` -> `/components/x/logo.tsx`
+  //  - `/components/x/../logo.tsx` -> `/components/logo.tsx`
   pub fn fix_import_url(&self, url: &str) -> String {
     let is_remote = is_remote_url(url);
     if !is_remote {
@@ -194,8 +191,8 @@ impl Resolver {
   // [/pages/index.tsx]
   // - `https://esm.sh/swr` -> `../-/esm.sh/swr.js`
   // - `https://esm.sh/react` -> `../-/esm.sh/react@${REACT_VERSION}.js`
-  // - `https://deno.land/x/aleph/mod.ts` -> `../-/deno.land/x/aleph@v${CURRENT_ALEPH_VERSION}/mod.ts`
-  // - `../components/logo.tsx` -> `../components/logo.js#/styles/app.css@000000`
+  // - `https://deno.land/x/aleph/mod.ts` -> `../-/deno.land/x/aleph@v${ALEPH_VERSION}/mod.ts`
+  // - `../components/logo.tsx` -> `../components/logo.js#/components/logo.tsx@000000`
   // - `../styles/app.css` -> `../styles/app.css.js#/styles/app.css@000000`
   pub fn resolve(&mut self, url: &str, is_dynamic: bool) -> (String, String) {
     // apply import map
@@ -328,12 +325,8 @@ impl Resolver {
               .unwrap()
               .trim_end_matches(s)
               .to_owned();
-            if self.bundle_mode {
-              if is_dynamic {
-                filename.push_str("bundle.");
-              } else {
-                filename.push_str("bundling.");
-              }
+            if self.bundle_mode && !is_dynamic {
+              filename.push_str("bundling.");
             }
             filename.push_str("js");
             if !is_remote && !self.specifier_is_remote {
@@ -351,12 +344,8 @@ impl Resolver {
                 .to_str()
                 .unwrap()
                 .to_owned();
-              if self.bundle_mode {
-                if is_dynamic {
-                  filename.push_str(".bundle");
-                } else {
-                  filename.push_str(".bundling");
-                }
+              if self.bundle_mode && !is_dynamic {
+                filename.push_str(".bundling");
               }
               filename.push_str(".js#");
               filename.push_str(fixed_url.as_str());

compiler/src/resolve_fold.rs

@@ -208,7 +208,7 @@ impl Fold for ResolveFold {
               let mut resolver = self.resolver.borrow_mut();
               let (resolved_path, fixed_url) = resolver.resolve(src.value.as_ref(), false);
               if resolver.bundle_mode && resolver.bundle_external.contains(fixed_url.as_str()) {
-                resolver.star_exports.push(fixed_url.clone());
+                resolver.bundle_star_exports.push(fixed_url.clone());
                 ModuleItem::ModuleDecl(ModuleDecl::ExportDecl(ExportDecl {
                   span: DUMMY_SP,
                   decl: Decl::Var(VarDecl {
@@ -217,7 +217,7 @@ impl Fold for ResolveFold {
                     declare: false,
                     decls: vec![create_aleph_pack_var_decl(
                       fixed_url.as_ref(),
-                      quote_ident!(format!("$$star_{}", resolver.star_exports.len() - 1)),
+                      quote_ident!(format!("$$star_{}", resolver.bundle_star_exports.len() - 1)),
                     )],
                   }),
                 }))
@@ -304,15 +304,17 @@ impl Fold for ResolveFold {
           prop: quote_ident!("import"),
         })))
       }
-      call.args = vec![ExprOrSpread {
-        spread: None,
-        expr: Box::new(Expr::Lit(Lit::Str(new_str(resolver.resolve(url, true).0)))),
-      }];
+      let (resolved_path, fixed_url) = resolver.resolve(url, true);
       if resolver.bundle_mode {
-        call.args.push(ExprOrSpread {
+        call.args = vec![ExprOrSpread {
           spread: None,
-          expr: Box::new(Expr::Lit(Lit::Str(new_str(resolver.specifier.clone())))),
-        })
+          expr: Box::new(Expr::Lit(Lit::Str(new_str(fixed_url)))),
+        }];
+      } else {
+        call.args = vec![ExprOrSpread {
+          spread: None,
+          expr: Box::new(Expr::Lit(Lit::Str(new_str(resolved_path)))),
+        }];
       }
     } else if is_call_expr_by_name(&call, "useDeno") {
       let callback_span = match call.args.first() {
@@ -330,6 +332,7 @@ impl Fold for ResolveFold {
         let bundle_mode = self.resolver.borrow().bundle_mode;
         let id = self.new_use_deno_hook_ident(span);
         if bundle_mode {
+          // tree-shake useDeno callback in bundle mode
           call.args[0] = ExprOrSpread {
             spread: None,
             expr: Box::new(Expr::Lit(Lit::Null(Null { span: DUMMY_SP }))),
@@ -552,23 +555,70 @@ mod tests {
   use crate::resolve::Resolver;
   use crate::swc::{st, EmitOptions, SWC};
   use sha1::{Digest, Sha1};
+  use std::collections::HashMap;
+
+  #[test]
+  fn resolve_import_export() {
+    let source = r#"
+      import React from 'react'
+      import { redirect } from 'aleph'
+      import { useDeno } from 'aleph/hooks.ts'
+      import { render } from 'react-dom/server'
+      import { render as _render } from 'https://cdn.esm.sh/v1/[email protected]/es2020/react-dom.js'
+      import Logo from '../component/logo.tsx'
+      import Logo2 from '~/component/logo.tsx'
+      import Logo3 from '@/component/logo.tsx'
+      const AsyncLogo = React.lazy(() => import('../components/async-logo.tsx'))
+      export { useState } from 'https://esm.sh/react'
+      export * from 'https://esm.sh/swr'
+      export { React, redirect, useDeno, render, _render, Logo, Logo2, Logo3, AsyncLogo }
+    "#;
+    let module = SWC::parse("/pages/index.tsx", source, None).expect("could not parse module");
+    let mut imports: HashMap<String, String> = HashMap::new();
+    imports.insert("@/".into(), "./".into());
+    imports.insert("~/".into(), "./".into());
+    imports.insert("aleph".into(), "https://deno.land/x/aleph/mod.ts".into());
+    imports.insert("aleph/".into(), "https://deno.land/x/aleph/".into());
+    imports.insert("react".into(), "https://esm.sh/react".into());
+    imports.insert("react-dom/".into(), "https://esm.sh/react-dom/".into());
+    let resolver = Rc::new(RefCell::new(Resolver::new(
+      "/pages/index.tsx",
+      ImportHashMap {
+        imports,
+        scopes: HashMap::new(),
+      },
+      Some("https://deno.land/x/[email protected]".into()),
+      Some("17.0.1".into()),
+      false,
+      vec![],
+    )));
+    let (code, _) = module
+      .transform(resolver.clone(), &EmitOptions::default())
+      .expect("could not transform module");
+    println!("{}", code);
+    assert!(code.contains("import React from \"../-/esm.sh/[email protected]\""));
+    assert!(code.contains("import { redirect } from \"../-/deno.land/x/[email protected]/mod.js\""));
+    assert!(code.contains("import { useDeno } from \"../-/deno.land/x/[email protected]/hooks.js\""));
+    assert!(code.contains("import { render } from \"../-/esm.sh/[email protected]/server.js\""));
+    assert!(code.contains("import { render as _render } from \"../-/cdn.esm.sh/v1/[email protected]/es2020/react-dom.js\""));
+    assert!(code.contains("import Logo from \"../component/logo.js#/component/logo.tsx@000000\""));
+    assert!(code.contains("import Logo2 from \"../component/logo.js#/component/logo.tsx@000000\""));
+    assert!(code.contains("import Logo3 from \"../component/logo.js#/component/logo.tsx@000000\""));
+    assert!(code.contains("const AsyncLogo = React.lazy(()=>import(\"../components/async-logo.js#/components/async-logo.tsx@000000\")"));
+    assert!(code.contains("export { useState } from \"../-/esm.sh/[email protected]\""));
+    assert!(code.contains("export * from \"../-/esm.sh/swr.js\""));
+  }
 
   #[test]
   fn sign_use_deno_hook() {
     let specifer = "/pages/index.tsx";
     let source = r#"
       export default function Index() {
         const verison = useDeno(() => Deno.version)
-        const verison = useDeno(async function() {
+        const data = useDeno(async function() {
           return await readJson("./data.json")
         }, 1000)
-        return (
-          <>
-            <p>Deno v{version.deno}</p>
-            <V8 />
-            <TS />
-          </>
-        )
+        return null
       }
     "#;
 
@@ -623,8 +673,8 @@ mod tests {
       import '../shared/iife.ts'
       import '../shared/iife2.ts'
       export * from "https://esm.sh/react"
-      export { render } from "https://esm.sh/react-dom"
       export * as ReactDom from "https://esm.sh/react-dom"
+      export { render } from "https://esm.sh/react-dom"
 
       const AsyncLogo = React.lazy(() => import('../components/async-logo.tsx'))
 
@@ -667,8 +717,9 @@ mod tests {
     );
     assert!(!code.contains("__ALEPH.pack[\"/shared/iife.ts\"]"));
     assert!(code.contains("import   \"../shared/iife2.bundling.js#/shared/iife2.ts@000000\""));
-    assert!(code
-      .contains("AsyncLogo = React.lazy(()=>__ALEPH.import(\"../components/async-logo.bundle.js#/components/async-logo.tsx@000000\", \"/pages/index.tsx\""));
+    assert!(
+      code.contains("AsyncLogo = React.lazy(()=>__ALEPH.import(\"/components/async-logo.tsx\"")
+    );
     assert!(code.contains(
       "const { default: __ALEPH_Head  } = __ALEPH.pack[\"https://deno.land/x/aleph/framework/react/head.ts\"]"
     ));

compiler/src/swc.rs

@@ -372,6 +372,5 @@ mod tests {
     assert!(code.contains("React.createElement(React.Fragment, null"));
     assert!(code.contains("React.createElement(\"h1\", {"));
     assert!(code.contains("className: \"title\""));
-    assert!(code.contains("import React from \"../-/esm.sh/react.js\""));
   }
 }