Bring jsx magic back

ije · ije · commit 27167e1de08b · 2022-04-30T11:01:12.000+08:00
diff --git a/compiler/src/jsx_magic.rs b/compiler/src/jsx_magic.rs
@@ -0,0 +1,166 @@
+use crate::resolver::{Resolver, RE_PROTOCOL_URL};
+use std::cell::RefCell;
+use std::rc::Rc;
+use swc_common::DUMMY_SP;
+use swc_ecmascript::ast::*;
+use swc_ecmascript::utils::quote_ident;
+use swc_ecmascript::visit::{noop_fold_type, Fold, FoldWith};
+
+pub fn jsx_magic_fold(resolver: Rc<RefCell<Resolver>>) -> impl Fold {
+  JSXMagicFold {
+    resolver: resolver.clone(),
+  }
+}
+
+/// Aleph JSX magic fold, functions include:
+/// - resolve `<a>` to `<Anchor>`
+/// - resolve `<head>` to `<Head>`
+struct JSXMagicFold {
+  resolver: Rc<RefCell<Resolver>>,
+}
+
+impl JSXMagicFold {
+  fn fold_jsx_opening_element(&mut self, mut el: JSXOpeningElement) -> JSXOpeningElement {
+    match &el.name {
+      JSXElementName::Ident(id) => {
+        let name = id.sym.as_ref();
+        match name {
+          "head" => {
+            let mut resolver = self.resolver.borrow_mut();
+            resolver.jsx_magic_tags.insert("Head".into());
+            el.name = JSXElementName::Ident(quote_ident!("__ALEPH__Head"));
+          }
+
+          "a" => {
+            let mut resolver = self.resolver.borrow_mut();
+            let mut tag = "Link";
+            let mut attrs: Vec<JSXAttrOrSpread> = vec![];
+
+            for attr in &el.attrs {
+              match &attr {
+                JSXAttrOrSpread::JSXAttr(attr) => {
+                  if let JSXAttr {
+                    name: JSXAttrName::Ident(id),
+                    value: Some(JSXAttrValue::Lit(Lit::Str(Str { value, .. }))),
+                    ..
+                  } = attr
+                  {
+                    let key = id.sym.as_ref();
+                    let value = value.as_ref();
+                    if (key == "href" && (value.is_empty() || RE_PROTOCOL_URL.is_match(value)))
+                      || (key == "target" && value == "_blank")
+                    {
+                      tag = "";
+                      break;
+                    }
+                  }
+                  if let JSXAttr {
+                    name: JSXAttrName::Ident(id),
+                    value,
+                    ..
+                  } = attr
+                  {
+                    match id.sym.as_ref() {
+                      "rel" => {
+                        if let Some(JSXAttrValue::Lit(Lit::Str(Str { value, .. }))) = value {
+                          let value = value.as_ref().split(" ").collect::<Vec<&str>>();
+                          if value.contains(&"nav") {
+                            tag = "NavLink";
+                          }
+                          if value.contains(&"replace") {
+                            attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
+                              span: DUMMY_SP,
+                              name: JSXAttrName::Ident(quote_ident!("replace")),
+                              value: None,
+                            }));
+                          }
+                          if value.contains(&"prefetch") {
+                            attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
+                              span: DUMMY_SP,
+                              name: JSXAttrName::Ident(quote_ident!("prefetch")),
+                              value: None,
+                            }));
+                          }
+                          if value.contains(&"exact") {
+                            attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
+                              span: DUMMY_SP,
+                              name: JSXAttrName::Ident(quote_ident!("exact")),
+                              value: None,
+                            }));
+                          }
+                        }
+                        attrs.push(JSXAttrOrSpread::JSXAttr(attr.clone()));
+                      }
+                      "href" => {
+                        attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
+                          span: DUMMY_SP,
+                          name: JSXAttrName::Ident(quote_ident!("to")),
+                          value: value.clone(),
+                        }));
+                      }
+                      "data-active-className" => {
+                        attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
+                          span: DUMMY_SP,
+                          name: JSXAttrName::Ident(quote_ident!("activeClassName")),
+                          value: value.clone(),
+                        }));
+                      }
+                      "data-active-style" => {
+                        attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
+                          span: DUMMY_SP,
+                          name: JSXAttrName::Ident(quote_ident!("activeStyle")),
+                          value: value.clone(),
+                        }));
+                      }
+                      _ => {
+                        attrs.push(JSXAttrOrSpread::JSXAttr(attr.clone()));
+                      }
+                    }
+                  } else {
+                    attrs.push(JSXAttrOrSpread::JSXAttr(attr.clone()))
+                  }
+                }
+                _ => attrs.push(attr.clone()),
+              };
+            }
+
+            if !tag.is_empty() {
+              resolver.jsx_magic_tags.insert(tag.into());
+              el.name = JSXElementName::Ident(quote_ident!(format!("__ALEPH__{}", tag)));
+              el.attrs = attrs;
+            }
+          }
+
+          _ => {}
+        }
+      }
+      _ => {}
+    };
+
+    el
+  }
+}
+
+impl Fold for JSXMagicFold {
+  noop_fold_type!();
+
+  fn fold_jsx_element(&mut self, el: JSXElement) -> JSXElement {
+    if el.span == DUMMY_SP {
+      return el;
+    }
+
+    let mut children: Vec<JSXElementChild> = vec![];
+    let opening = self.fold_jsx_opening_element(el.opening);
+
+    for child in el.children {
+      children.push(child.fold_children_with(self));
+    }
+
+    JSXElement {
+      span: DUMMY_SP,
+      opening,
+      children,
+      ..el
+    }
+  }
+}
diff --git a/compiler/src/lib.rs b/compiler/src/lib.rs
@@ -5,6 +5,7 @@ mod css;
 mod error;
 mod export_names;
 mod hmr;
+mod jsx_magic;
 mod resolve_fold;
 mod resolver;
 mod swc;
@@ -58,6 +59,9 @@ pub struct Options {
   #[serde(default)]
   pub jsx_import_source: Option<String>,
 
+  #[serde(default)]
+  pub jsx_magic: bool,
+
   #[serde(default)]
   pub strip_data_export: bool,
 }
@@ -163,6 +167,7 @@ pub fn transform(specifier: &str, code: &str, options: JsValue) -> Result<JsValu
       resolver.clone(),
       &EmitOptions {
         strip_data_export: options.strip_data_export,
+        jsx_magic: options.jsx_magic,
         jsx_import_source: options.jsx_import_source,
         minify: !options.is_dev,
         source_map: options.is_dev,
diff --git a/compiler/src/resolve_fold.rs b/compiler/src/resolve_fold.rs
@@ -3,6 +3,7 @@ use crate::swc_helpers::{is_call_expr_by_name, new_str};
 use std::{cell::RefCell, rc::Rc};
 use swc_common::{Span, DUMMY_SP};
 use swc_ecmascript::ast::*;
+use swc_ecmascript::utils::quote_ident;
 use swc_ecmascript::visit::{noop_fold_type, Fold, FoldWith};
 
 pub fn resolve_fold(
@@ -29,6 +30,34 @@ impl Fold for ResolveFold {
   // fold&resolve import/export url
   fn fold_module_items(&mut self, module_items: Vec<ModuleItem>) -> Vec<ModuleItem> {
     let mut items = Vec::<ModuleItem>::new();
+    let jsx_magic_tags = self.resolver.borrow().jsx_magic_tags.to_owned();
+    let jsx_runtime = self.resolver.borrow().jsx_runtime.to_owned();
+
+    if jsx_magic_tags.len() > 0 {
+      if let Some(jsx_runtime) = jsx_runtime {
+        let mut resolver = self.resolver.borrow_mut();
+        let url = format!("{}/framework/{}/mod.ts", resolver.aleph_pkg_uri, jsx_runtime);
+        let src = resolver.resolve(&url, false, None);
+        // import { $TAG as __ALEPH_$TAG } from "$aleph_pkg_uri/framework/$framework/mod.ts"
+        items.push(ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
+          span: DUMMY_SP,
+          specifiers: jsx_magic_tags
+            .into_iter()
+            .map(|tag| {
+              ImportSpecifier::Named(ImportNamedSpecifier {
+                span: DUMMY_SP,
+                local: quote_ident!(format!("__ALEPH__{}", tag)),
+                imported: Some(ModuleExportName::Ident(quote_ident!(tag.as_str()))),
+                is_type_only: false,
+              })
+            })
+            .collect(),
+          src: new_str(&src),
+          type_only: false,
+          asserts: None,
+        })));
+      }
+    }
 
     for item in module_items {
       match item {
diff --git a/compiler/src/resolver.rs b/compiler/src/resolver.rs
@@ -1,4 +1,5 @@
 use import_map::ImportMap;
+use indexmap::IndexSet;
 use path_slash::PathBufExt;
 use pathdiff::diff_paths;
 use regex::Regex;
@@ -12,7 +13,7 @@ use url::Url;
 lazy_static! {
   pub static ref RE_REACT_URL: Regex =
     Regex::new(r"^https?://(esm\.sh|cdn\.esm\.sh)(/v\d+)?/react(\-dom)?(@[^/]+)?(/.*)?$").unwrap();
-  pub static ref RE_PROTOCOL_URL: Regex = Regex::new(r"^(mailto:|[a-z]+://)").unwrap();
+  pub static ref RE_PROTOCOL_URL: Regex = Regex::new(r"^(data:|mailto:|[a-z]+://)").unwrap();
 }
 
 #[derive(Clone, Debug, Eq, PartialEq, Serialize)]
@@ -38,23 +39,17 @@ pub struct Resolver {
   pub deps: Vec<DependencyDescriptor>,
   /// jsx runtime: react | preact
   pub jsx_runtime: Option<String>,
+  /// resolved jsx magic tags: `Head`, 'Anchor'
+  pub jsx_magic_tags: IndexSet<String>,
   /// development mode
   pub is_dev: bool,
   // internal
   import_map: ImportMap,
-  resolve_remote_deps: bool,
-  jsx_runtime_version: Option<String>,
-  jsx_runtime_cdn_version: Option<String>,
   graph_versions: HashMap<String, String>,
   initial_graph_version: Option<String>,
-}
-
-#[derive(Clone, Debug, Eq, PartialEq, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub struct InlineStyle {
-  pub r#type: String,
-  pub quasis: Vec<String>,
-  pub exprs: Vec<String>,
+  jsx_runtime_cdn_version: Option<String>,
+  jsx_runtime_version: Option<String>,
+  resolve_remote_deps: bool,
 }
 
 impl Resolver {
@@ -75,6 +70,7 @@ impl Resolver {
       specifier: specifier.into(),
       specifier_is_remote: is_http_url(specifier),
       deps: Vec::new(),
+      jsx_magic_tags: IndexSet::new(),
       jsx_runtime,
       jsx_runtime_version,
       jsx_runtime_cdn_version,
diff --git a/compiler/src/swc.rs b/compiler/src/swc.rs
@@ -1,6 +1,7 @@
 use crate::error::{DiagnosticBuffer, ErrorBuffer};
 use crate::export_names::ExportParser;
 use crate::hmr::hmr;
+use crate::jsx_magic::jsx_magic_fold;
 use crate::resolve_fold::resolve_fold;
 use crate::resolver::{DependencyDescriptor, Resolver};
 
@@ -23,6 +24,7 @@ use swc_ecmascript::visit::{Fold, FoldWith};
 #[derive(Debug, Clone)]
 pub struct EmitOptions {
   pub jsx_import_source: Option<String>,
+  pub jsx_magic: bool,
   pub strip_data_export: bool,
   pub minify: bool,
   pub source_map: bool,
@@ -32,6 +34,7 @@ impl Default for EmitOptions {
   fn default() -> Self {
     EmitOptions {
       jsx_import_source: None,
+      jsx_magic: false,
       strip_data_export: false,
       minify: false,
       source_map: false,
@@ -152,6 +155,7 @@ impl SWC {
       };
       let passes = chain!(
         swc_ecma_transforms::resolver(unresolved_mark, top_level_mark, is_ts),
+        Optional::new(jsx_magic_fold(resolver.clone()), options.jsx_magic),
         Optional::new(react::jsx_src(is_dev, self.source_map.clone()), is_jsx),
         resolve_fold(resolver.clone(), options.strip_data_export, false),
         decorators::decorators(decorators::Config {
@@ -201,7 +205,7 @@ impl SWC {
         Optional::new(hmr(resolver.clone()), is_dev && !specifier_is_remote),
         fixer(Some(&self.comments)),
         hygiene()
-      ); 
+      );
 
       let (code, map) = self.emit(passes, options.source_map, options.minify).unwrap();
 
diff --git a/compiler/src/tests.rs b/compiler/src/tests.rs
diff --git a/compiler/types.ts b/compiler/types.ts
