fix: improve browser support for website (#1574)

* fix: improve browser support for website

* fix(compiler): failing test due to babel config

babel.config.js

@@ -13,7 +13,6 @@ module.exports = api => ({
   ],
   plugins: [
     "@babel/transform-runtime",
-    "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread"
   ],
   overrides: [

package.json

@@ -28,6 +28,7 @@
     "@babel/plugin-proposal-export-default-from": "^7.7.4",
     "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.7.7",
+    "@babel/plugin-proposal-private-methods": "^7.7.4",
     "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.7.7",
     "@babel/register": "^7.7.7",

packages/compiler/src/babel-plugin/index.js

@@ -12,7 +12,19 @@ export default (api, options) => {
   options.translator = options.translator || "default";
 
   const isProduction = api.env("production");
-  const translator = require(`@marko/translator-${options.translator}`);
+  let translator;
+
+  if (typeof window === "undefined") {
+    translator = require(`@marko/translator-${options.translator}`);
+  } else {
+    if (translator !== "default") {
+      throw new Error(
+        "@marko/compiler: only the default translator can be used in the browser."
+      );
+    }
+
+    translator = require("@marko/translator-default");
+  }
 
   return {
     name: "marko",

packages/compiler/src/taglib/index.js

@@ -1,14 +1,25 @@
-import path from "path";
 import loader from "marko/src/taglib/taglib-loader";
 import finder from "marko/src/taglib/taglib-finder";
 import TaglibLookup from "marko/src/taglib/taglib-lookup/TaglibLookup";
 
 export { excludeDir, excludePackage } from "marko/src/taglib/taglib-finder";
 
 let lookupCache = Object.create(null);
-const coreTaglibs = ["html", "svg", "math"].map(name =>
-  loader.loadTaglibFromFile(path.join(__dirname, name, "marko.json"))
-);
+
+const coreTaglibs = [
+  loader.loadTaglibFromProps(
+    loader.createTaglib(require.resolve("./html/marko.json")),
+    require("./html/marko.json")
+  ),
+  loader.loadTaglibFromProps(
+    loader.createTaglib(require.resolve("./svg/marko.json")),
+    require("./svg/marko.json")
+  ),
+  loader.loadTaglibFromProps(
+    loader.createTaglib(require.resolve("./math/marko.json")),
+    require("./math/marko.json")
+  )
+];
 
 export function buildLookup(dirname, translator = "default") {
   const translatorTaglibs = Array.isArray(translator)

packages/compiler/test/index.test.js

@@ -28,7 +28,11 @@ fs.readdirSync(path.join(__dirname, "../../"))
           ...config,
           babelConfig: {
             babelrc: false,
-            configFile: false
+            configFile: false,
+            plugins: [
+              "@babel/plugin-proposal-class-properties",
+              "@babel/plugin-proposal-private-methods"
+            ]
           },
           writeVersionComment: false
         };

packages/marko/package.json

@@ -7,7 +7,6 @@
         "app-module-path": "^2.2.0",
         "argly": "^1.0.0",
         "complain": "^1.6.0",
-        "deresolve": "^1.1.2",
         "events-light": "^1.0.0",
         "htmljs-parser": "^2.7.1",
         "lasso-caching-fs": "^1.0.1",

packages/marko/src/compiler/modules.js

@@ -1,34 +1,5 @@
 "use strict";
 
-var nativeRequire = require;
-var resolveFrom = require("resolve-from");
-var deresolve = require("deresolve");
-
-const deresolveOptions = {
-  shouldRemoveExt(ext) {
-    return ext === ".js" || ext === ".json" || ext === ".es6";
-  }
-};
-
-// This allows us to swap out a different implementation in the browser...
-// We only need this to make Try Online work :/
-
-var helpers = {
-  require: function(path) {
-    return nativeRequire(path);
-  },
-
-  resolve: function(path) {
-    return nativeRequire.resolve(path);
-  },
-
-  resolveFrom: function(from, target) {
-    return resolveFrom(from, target);
-  },
-
-  deresolve: function(targetFilename, from) {
-    return deresolve(targetFilename, from, deresolveOptions);
-  }
-};
-
-module.exports = helpers;
+if (typeof window === "undefined") {
+  exports.require = require;
+}

packages/marko/src/taglib/taglib-finder/index.js

@@ -1,11 +1,11 @@
 "use strict";
-var taglibLoader = require("../taglib-loader");
 var nodePath = require("path");
-var lassoPackageRoot = require("lasso-package-root");
+var lassoCachingFS = require("lasso-caching-fs");
 var resolveFrom = require("resolve-from").silent;
+var taglibLoader = require("../taglib-loader");
+var lassoPackageRoot = require("lasso-package-root");
 var scanTagsDir = require("../taglib-loader/scanTagsDir");
 var DependencyChain = require("../taglib-loader/DependencyChain");
-var lassoCachingFS = require("lasso-caching-fs");
 var hasOwnProperty = Object.prototype.hasOwnProperty;
 
 var findCache = {};
@@ -17,16 +17,11 @@ var excludedPackages = {};
  * was added for testing purposes.
  */
 function reset() {
-  lassoCachingFS.clearCaches();
-  findCache = {};
+  clearCache();
   excludedDirs = {};
   excludedPackages = {};
 }
 
-function existsCached(path) {
-  return lassoCachingFS.existsSync(path);
-}
-
 function getModuleRootPackage(dirname) {
   try {
     return lassoPackageRoot.getRootPackage(dirname);
@@ -98,7 +93,7 @@ function find(dirname, registeredTaglibs) {
       let taglibPath = nodePath.join(curDirname, "marko.json");
       let taglib;
 
-      if (existsCached(taglibPath)) {
+      if (lassoCachingFS.existsSync(taglibPath)) {
         taglib = taglibLoader.loadTaglibFromFile(taglibPath);
         helper.addTaglib(taglib);
       }
@@ -107,7 +102,7 @@ function find(dirname, registeredTaglibs) {
         let componentsPath = nodePath.join(curDirname, "components");
 
         if (
-          existsCached(componentsPath) &&
+          lassoCachingFS.existsSync(componentsPath) &&
           !excludedDirs[componentsPath] &&
           !helper.alreadyAdded(componentsPath)
         ) {
@@ -139,7 +134,10 @@ function find(dirname, registeredTaglibs) {
     // Now look for `marko.json` from installed packages
     getAllDependencyNames(rootPkg).forEach(name => {
       if (!excludedPackages[name]) {
-        let taglibPath = resolveFrom(rootPkg.__dirname, name + "/marko.json");
+        let taglibPath = resolveFrom(
+          rootPkg.__dirname,
+          nodePath.join(name, "marko.json")
+        );
         if (taglibPath) {
           var taglib = taglibLoader.loadTaglibFromFile(taglibPath);
           helper.addTaglib(taglib);

packages/marko/src/taglib/taglib-loader/loadTagFromProps.js

@@ -1,25 +1,17 @@
 "use strict";
 
 var ok = require("assert").ok;
+var resolveFrom = require("resolve-from").silent;
+var lassoCachingFS = require("lasso-caching-fs");
 var propertyHandlers = require("property-handlers");
 var isObjectEmpty = require("raptor-util/isObjectEmpty");
 var nodePath = require("path");
-var markoModules = require("../../compiler/modules"); // NOTE: different implementation for browser
 var forEachEntry = require("raptor-util/forEachEntry");
 var createError = require("raptor-util/createError");
 var types = require("./types");
 var loaders = require("./loaders");
 var hasOwnProperty = Object.prototype.hasOwnProperty;
 
-function exists(path) {
-  try {
-    markoModules.resolve(path);
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
 function removeDashes(str) {
   return str.replace(/-([a-z])/g, function(match, lower) {
     return lower.toUpperCase();
@@ -55,7 +47,7 @@ function addTransformer(tagLoader, value) {
     value,
     {
       path(value) {
-        const path = markoModules.resolveFrom(dirname, value);
+        const path = resolveFrom(dirname, value);
         transformer.path = path;
       },
 
@@ -338,7 +330,7 @@ class TagLoader {
   renderer(value) {
     var tag = this.tag;
     var dirname = this.dirname;
-    var path = markoModules.resolveFrom(dirname, value);
+    var path = resolveFrom(dirname, value);
     tag.renderer = path;
   }
 
@@ -352,7 +344,7 @@ class TagLoader {
     var dirname = this.dirname;
 
     var path = nodePath.resolve(dirname, value);
-    if (!exists(path)) {
+    if (!lassoCachingFS.existsSync(path)) {
       throw new Error('Template at path "' + path + '" does not exist.');
     }
     tag.template = path;
@@ -386,7 +378,7 @@ class TagLoader {
   migrator(value) {
     var tag = this.tag;
     var dirname = this.dirname;
-    tag.migratorPaths.push(markoModules.resolveFrom(dirname, value));
+    tag.migratorPaths.push(resolveFrom(dirname, value));
   }
 
   /**
@@ -399,7 +391,7 @@ class TagLoader {
     var tag = this.tag;
     var dirname = this.dirname;
 
-    var path = markoModules.resolveFrom(dirname, value);
+    var path = resolveFrom(dirname, value);
     tag.codeGeneratorModulePath = path;
   }
 
@@ -414,7 +406,7 @@ class TagLoader {
     var tag = this.tag;
     var dirname = this.dirname;
 
-    var path = markoModules.resolveFrom(dirname, value);
+    var path = resolveFrom(dirname, value);
     tag.nodeFactoryPath = path;
   }
 

packages/marko/src/taglib/taglib-loader/loadTaglibFromProps.js

@@ -1,27 +1,18 @@
 "use strict";
 
 var ok = require("assert").ok;
+var resolveFrom = require("resolve-from").silent;
+var lassoCachingFS = require("lasso-caching-fs");
 var types = require("./types");
 var nodePath = require("path");
 var scanTagsDir = require("./scanTagsDir");
-var markoModules = require("../../compiler/modules"); // NOTE: different implementation for browser
 var propertyHandlers = require("property-handlers");
 var jsonFileReader = require("./json-file-reader");
-var resolveFrom = typeof window === "undefined" && require("resolve-from"); // Not used in the browser
 var DependencyChain = require("./DependencyChain");
 var createError = require("raptor-util/createError");
 var loaders = require("./loaders");
 var hasOwnProperty = Object.prototype.hasOwnProperty;
 
-function exists(path) {
-  try {
-    markoModules.resolve(path);
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
 function addTransformer(taglibLoader, value) {
   // Marko allows a "text-transformer" to be registered. The provided
   // text transformer will be called for any static text found in a template.
@@ -34,7 +25,7 @@ function addTransformer(taglibLoader, value) {
     value,
     {
       path(value) {
-        const path = markoModules.resolveFrom(dirname, value);
+        const path = resolveFrom(dirname, value);
         transformer.path = path;
       }
     },
@@ -112,7 +103,7 @@ class TaglibLoader {
     if (typeof value === "string") {
       tagFilePath = nodePath.resolve(this.dirname, value);
 
-      if (!exists(tagFilePath)) {
+      if (!lassoCachingFS.existsSync(tagFilePath)) {
         throw new Error(
           'Tag at path "' +
             tagFilePath +
@@ -260,9 +251,6 @@ class TaglibLoader {
   }
 
   taglibImports(imports) {
-    if (!resolveFrom) {
-      return;
-    }
     // The "taglib-imports" property allows another taglib to be imported
     // into this taglib so that the tags defined in the imported taglib
     // will be part of this taglib.
@@ -281,7 +269,7 @@ class TaglibLoader {
         if (typeof curImport === "string") {
           var basename = nodePath.basename(curImport);
           if (basename === "package.json") {
-            var packagePath = markoModules.resolveFrom(dirname, curImport);
+            var packagePath = resolveFrom(dirname, curImport);
             var packageDir = nodePath.dirname(packagePath);
             var pkg = jsonFileReader.readFileSync(packagePath);
             var dependencies = pkg.dependencies;
@@ -292,7 +280,7 @@ class TaglibLoader {
 
                 importPath = resolveFrom(
                   packageDir,
-                  dependencyName + "/marko.json"
+                  nodePath.join(dependencyName, "marko.json")
                 );
 
                 if (importPath) {
@@ -323,7 +311,7 @@ class TaglibLoader {
     var taglib = this.taglib;
     var dirname = this.dirname;
 
-    var path = markoModules.resolveFrom(dirname, value);
+    var path = resolveFrom(dirname, value);
     taglib.migratorPath = path;
   }
 
@@ -345,7 +333,7 @@ class TaglibLoader {
       value,
       {
         path(value) {
-          var path = markoModules.resolveFrom(dirname, value);
+          var path = resolveFrom(dirname, value);
           transformer.path = path;
         }
       },

packages/translator-default/src/tag/attribute/directives/index.js

@@ -0,0 +1,15 @@
+import classPlugin from "./class";
+import stylePlugin from "./style";
+import noUpdatePlugin from "./no-update";
+import noUpdateIfPlugin from "./no-update-if";
+import noUpdateBodyPlugin from "./no-update-body";
+import noUpdateBodyIfPlugin from "./no-update-body-if";
+
+export default {
+  class: classPlugin,
+  style: stylePlugin,
+  "no-update": noUpdatePlugin,
+  "no-update-if": noUpdateIfPlugin,
+  "no-update-body": noUpdateBodyPlugin,
+  "no-update-body-if": noUpdateBodyIfPlugin
+};