use oc-vite for importing statics

Author: ricardo-devis-agullo

packages/oc-vite-compiler/lib/serverWrapper.js

@@ -0,0 +1,37 @@
+const removeExtension = (path) => path.replace(/\.(j|t)sx?$/, '');
+
+const higherOrderServerTemplate = ({
+  serverPath,
+  componentName,
+  componentVersion,
+  bundleHashKey
+}) => {
+  return `
+import { data as dataProvider } from '${removeExtension(serverPath)}';
+
+export const data = (context : any, callback : (error: any, data?: any) => void) => {
+  dataProvider(context, (error: any, model: any) => {
+    if (error) {
+      return callback(error);
+    }
+    const props = Object.assign({}, model, {
+      _staticPath: context.staticPath,
+      _baseUrl: context.baseUrl,
+      _componentName: "${componentName}",
+      _componentVersion: "${componentVersion}"
+    });
+    const srcPathHasProtocol = context.staticPath.indexOf("http") === 0;
+    const srcPath = srcPathHasProtocol ? context.staticPath : ("https:" + context.staticPath);
+    return callback(null, Object.assign({}, {
+      component: {
+        key: "${bundleHashKey}",
+        src: srcPath + "template.js",
+        props
+      }
+    }));
+  });
+}
+`;
+};
+
+module.exports = higherOrderServerTemplate;

packages/oc-vite-compiler/lib/viteServer.js

@@ -4,10 +4,10 @@ const vite = require('vite');
 const fs = require('fs-extra');
 const coreModules = require('builtin-modules');
 const hashBuilder = require('oc-hash-builder');
+const serverWrapper = require('./serverWrapper');
 
 const nodeModuleMatcher = /^[a-z@][a-z\-/0-9.]+$/i;
 const moduleWithPathMatcher = /^(?!@).*\//g;
-const removeExtension = (path) => path.replace(/\.(j|t)sx?$/, '');
 
 async function compileServer(options) {
   const componentPath = options.componentPath;
@@ -23,7 +23,7 @@ async function compileServer(options) {
   const componentVersion = options.componentPackage.version;
   const production = !!options.production;
 
-  const wrapperFn = options.serverWrapper || (({ serverPath }) => `export { data } from "${removeExtension(serverPath)}"`)
+  const wrapperFn = options.serverWrapper || serverWrapper;
   const higherOrderServerContent = wrapperFn({
     bundleHashKey: options.compiledViewInfo.bundle.hashKey,
     serverPath,

packages/oc-vite-compiler/lib/viteView.js

@@ -33,7 +33,8 @@ async function compileView(options) {
   }
 
   const staticFiles = options.componentPackage.oc.files.static;
-  const staticFolder = Array.isArray(staticFiles) ? staticFiles[0] : staticFiles;
+  let staticFolder = Array.isArray(staticFiles) ? staticFiles[0] : staticFiles;
+  staticFolder = staticFolder.replace(/^\//, '').replace(/\/$/, '');
   const viewFileName = options.componentPackage.oc.files.template.src;
   const componentPath = options.componentPath;
   const viewPath = processRelativePath(viewFileName);
@@ -81,6 +82,15 @@ async function compileView(options) {
         }
       }
     }
+    , experimental: {
+      renderBuiltUrl(filename, { hostType }) {
+        if (hostType === 'js') {
+          return { runtime: `__toOcStaticPathUrl(${JSON.stringify(filename)})` };
+        } else {
+          return { relative: true };
+        }
+      }
+    }
   });
   const out = Array.isArray(result) ? result[0] : result;
   const bundle = out.output.find((x) => x.facadeModuleId.endsWith(viewWrapperName)).code;
@@ -106,8 +116,16 @@ async function compileView(options) {
     bundle: wrappedBundle,
     hash: bundleHash
   });
-  const hash = hashBuilder.fromString(templateString);
-  const view = ocViewWrapper(hash, templateString);
+  const wrappedTemplateString = `function(model) {
+    var __toOcStaticPathUrl = function(args) {
+      return model.component.props._staticPath + '${staticFolder}/' + args;
+    } 
+    var innerFn = ${templateString};
+    return innerFn(model);
+  }
+  `;
+  const hash = hashBuilder.fromString(wrappedTemplateString);
+  const view = ocViewWrapper(hash, wrappedTemplateString);
 
   await fs.unlink(viewWrapperPath);
   await fs.mkdir(publishPath, { recursive: true });

packages/oc-vite-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oc-vite-compiler",
-  "version": "1.1.2",
+  "version": "2.0.0-beta.0",
   "description": "OC-Vite-Compiler",
   "main": "index.js",
   "repository": {
@@ -26,7 +26,7 @@
     "fs-extra": "^10.1.0",
     "oc-hash-builder": "^1.0.5",
     "oc-view-wrapper": "^1.0.6",
-    "vite": "^4.3.1",
+    "oc-vite": "^1.0.0",
     "vite-plugin-environment": "^1.1.3"
   },
   "files": [
@@ -35,4 +35,4 @@
     "LICENSE",
     "README.md"
   ]
-}
+}