fix-next: register custom components at build time (#529)

Author: sis0k0

Diff for: register-modules.js

@@ -1,4 +1,4 @@
 require("tns-core-modules/bundle-entry-points");
-const context = require.context("~/", true, /(root|page|fragment)\.(xml|css|js|ts|scss)$/);
+const context = require.context("~/", true, /(root|page)\.(xml|css|js|ts|scss)$/);
 global.registerWebpackModules(context);
 

Diff for: xml-namespace-loader.js

@@ -1,34 +1,74 @@
+const { parse, relative, join, basename, extname } = require("path");
+
 module.exports = function(source) {
     this.value = source;
 
     const { XmlParser } = require("tns-core-modules/xml");
 
     let namespaces = [];
     const parser = new XmlParser((event) => {
-        const namespace = event.namespace;
+        const { namespace, elementName } = event;
+
         if (
             namespace &&
             !namespace.startsWith("http") &&
-            namespaces.indexOf(namespace) === -1
+            !namespaces.some(n => n.name === namespace)
         ) {
-            namespaces.push(namespace);
+            const localNamespacePath = join(this.rootContext, namespace);
+            const localModulePath = join(localNamespacePath, elementName);
+            const resolvedPath = tryResolve(localNamespacePath) ||
+                tryResolve(localModulePath) ||
+                namespace;
+
+            this.addDependency(resolvedPath);
+            namespaces.push({ name: namespace, path: resolvedPath });
+
+            const moduleName = `${namespace}/${elementName}`;
+            namespaces.push({ name: moduleName, path: resolvedPath });
+
+            const { dir, name } =  parse(resolvedPath);
+            const noExtFilename = join(dir, name);
+
+            const xmlFile = `${noExtFilename}.xml`;
+            const xmlFileResolved = tryResolve(xmlFile);
+            if (xmlFileResolved) {
+                this.addDependency(xmlFileResolved);
+                namespaces.push({ name: `${moduleName}.xml`, path: xmlFileResolved });
+            }
+
+            const cssFile = `${noExtFilename}.css`;
+            const cssFileResolved = tryResolve(cssFile);
+            if (cssFileResolved) {
+                this.addDependency(cssFileResolved);
+                namespaces.push({ name: `${moduleName}.css`, path: cssFileResolved });
+            }
         }
     }, undefined, true);
+
     parser.parse(source);
 
-    const registerModules = namespaces
+    const moduleRegisters = namespaces
         .map(n =>
-            `global.registerModule("${n}", function() { return require("${n}"); })`
+            `global.registerModule("${n.name}", function() { return require("${n.path}"); });`
         )
-        .join(";");
+        .join("");
 
     // escape special whitespace characters
     // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Issue_with_plain_JSON.stringify_for_use_as_JavaScript
     const json = JSON.stringify(source)
         .replace(/\u2028/g, '\\u2028')
         .replace(/\u2029/g, '\\u2029');
 
-    const wrapped = `${registerModules}\nmodule.exports = ${json}`;
+    const wrapped = `${moduleRegisters}\nmodule.exports = ${json}`;
 
     this.callback(null, wrapped);
 }
+
+function tryResolve(path) {
+    try {
+        return require.resolve(path);
+    } catch(e) {
+        // The path couldn't be resolved
+        return;
+    }
+}