oc-template-preact-compiler 0.0.7 → 0.1.0

package/lib/compile.js

@@ -4,9 +4,8 @@ const createCompile = require('oc-generic-template-compiler').createCompile;
 const compileStatics = require('oc-statics-compiler');
 const getInfo = require('oc-template-preact').getInfo;
 const { preact } = require('@preact/preset-vite');
+const { viteView, viteServer } = require('oc-vite-compiler');
 
-const viteView = require('./to-publish/viteView');
-const viteServer = require('./to-publish/viteServer');
 const verifyTypeScriptSetup = require('./verifyConfig');
 const higherOrderServerTemplate = require('./higherOrderServerTemplate');
 const preactOCProviderTemplate = require('./preactOCProviderTemplate');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oc-template-preact-compiler",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -26,18 +26,13 @@
   "dependencies": {
     "@preact/preset-vite": "^2.5.0",
     "chalk": "^3.0.0",
-    "fs-extra": "^10.0.0",
     "immer": "^9.0.6",
-    "oc-external-dependencies-handler": "1.1.0",
     "oc-generic-template-compiler": "2.1.0",
-    "oc-hash-builder": "1.0.2",
     "oc-statics-compiler": "2.0.10",
     "oc-template-preact": "0.0.2",
-    "oc-view-wrapper": "1.0.3",
-    "preact": "^10.13.2",
-    "resolve": "^1.20.0",
-    "vite": "^4.2.1",
-    "vite-plugin-environment": "^1.1.3"
+    "oc-vite-compiler": "^1.1.1",
+    "preact": "^10",
+    "resolve": "^1.20.0"
   },
   "peerDependencies": {
     "preact": "^10"
@@ -51,6 +46,7 @@
     "LICENSE"
   ],
   "devDependencies": {
+    "fs-extra": "^10.0.0",
     "lodash": "^4.17.4",
     "prettier": "^2.3.2",
     "prettier-config-guestline": "2.0.0"

package/scaffold/src/package.json

@@ -34,7 +34,7 @@
     "@testing-library/user-event": "^14.4.3",
     "jsdom": "^21.1.1",
     "oc-template-preact": "0.0.2",
-    "oc-template-preact-compiler": "0.0.7",
+    "oc-template-preact-compiler": "0.1.0",
     "preact": "^10.13.2",
     "typescript": "5.0.2",
     "vitest": "^0.29.7"

package/scaffold/src/vite.config.ts

@@ -2,6 +2,8 @@ import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  // Add your own plugins here for thinkgs like eslint or typecheckers
+  plugins: [],
   // @ts-ignore Missing test property
   test: {
     environment: 'jsdom'

package/lib/to-publish/cssModulesPlugin.js

@@ -1,81 +0,0 @@
-const { transformSync } = require('@babel/core');
-
-const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`;
-const importRE =
-  /import\s+([\S]+)\s+from\s+('|")([\S]+)\.(css|less|sass|scss|styl|stylus|postcss)(\?[\S]*)?('|")/;
-const jsRE = /\.(js|mjs|ts|jsx|tsx)/;
-const cssLangRE = new RegExp(cssLangs);
-const cssModuleRE = new RegExp(`\\.module${cssLangs}`);
-
-function autoCSSModulePlugin() {
-  return () => {
-    return {
-      visitor: {
-        ImportDeclaration: (path) => {
-          const { node } = path;
-          if (!node) {
-            return;
-          }
-          // 如果不是module css的那么就通过 转化为 module.styl来模块化css
-          if (
-            node.specifiers &&
-            node.specifiers.length > 0 &&
-            cssLangRE.test(node.source.value) &&
-            !cssModuleRE.test(node.source.value)
-          ) {
-            const cssFile = node.source.value;
-            const extension = cssFile.split('.').pop() ?? 'css';
-            node.source.value =
-              cssFile + (cssFile.indexOf('?') > -1 ? '&' : '?') + `.module.${extension}`;
-          }
-        }
-      }
-    };
-  };
-}
-
-function transform(code, { sourceMap, file }) {
-  const parsePlugins = ['jsx'];
-  if (/\.tsx?$/.test(file)) {
-    parsePlugins.push('typescript');
-  }
-
-  const result = transformSync(code, {
-    configFile: false,
-    parserOpts: {
-      sourceType: 'module',
-      allowAwaitOutsideFunction: true,
-      plugins: parsePlugins
-    },
-    sourceMaps: true,
-    sourceFileName: file,
-    inputSourceMap: sourceMap,
-    plugins: [autoCSSModulePlugin()]
-  });
-
-  return {
-    code: result.code,
-    map: result.map
-  };
-}
-
-function viteTransformCSSModulesPlugin() {
-  const name = 'vite-plugin-transform-css-modules';
-  return {
-    name,
-    transform(code, id) {
-      if (jsRE.test(id) && importRE.test(code)) {
-        const result = transform(code, {
-          file: id,
-          sourceMap: this.getCombinedSourcemap()
-        });
-        if (result) {
-          return result;
-        }
-      }
-      return undefined;
-    }
-  };
-}
-
-module.exports = viteTransformCSSModulesPlugin;

package/lib/to-publish/viteServer.js

@@ -1,78 +0,0 @@
-const vite = require('vite');
-const fs = require('fs-extra');
-const path = require('path');
-const { callbackify } = require('util');
-const coreModules = require('builtin-modules');
-const hashBuilder = require('oc-hash-builder');
-
-const nodeModuleMatcher = /^[a-z@][a-z\-/0-9.]+$/i;
-
-async function compileServer(options) {
-  const componentPath = options.componentPath;
-  const serverFileName = options.componentPackage.oc.files.data;
-  let serverPath = path.join(options.componentPath, serverFileName);
-  if (process.platform === 'win32') {
-    serverPath = serverPath.split('\\').join('\\\\');
-  }
-  const publishFileName = options.publishFileName || 'server.js';
-  const publishPath = options.publishPath;
-  const dependencies = options.componentPackage.dependencies || {};
-  const componentName = options.componentPackage.name;
-  const componentVersion = options.componentPackage.version;
-  const production = !!options.production;
-
-  const higherOrderServerContent = options.serverWrapper({
-    serverPath,
-    componentName,
-    componentVersion
-  });
-  const tempFolder = path.join(publishPath, 'temp');
-  const higherOrderServerPath = path.join(tempFolder, '__oc_higherOrderServer.ts');
-  const externals = [...Object.keys(dependencies), ...coreModules];
-
-  try {
-    await fs.outputFile(higherOrderServerPath, higherOrderServerContent);
-
-    const baseConfig = await vite.loadConfigFromFile(process.cwd()).catch(() => null);
-    const basePlugins = baseConfig?.config?.plugins ?? [];
-
-    const result = await vite.build({
-      appType: 'custom',
-      root: componentPath,
-      mode: production ? 'production' : 'development',
-      plugins: [...options.plugins, ...basePlugins],
-      logLevel: options.verbose ? 'info' : 'silent',
-      build: {
-        lib: { entry: higherOrderServerPath, formats: ['cjs'] },
-        write: false,
-        minify: production,
-        rollupOptions: {
-          external: (id) => {
-            if (nodeModuleMatcher.test(id)) {
-              if (!externals.includes(id)) {
-                throw new Error(`Missing dependencies from package.json => ${id}`);
-              }
-              return true;
-            }
-            return false;
-          }
-        }
-      }
-    });
-    const out = Array.isArray(result) ? result[0] : result;
-    const bundle = out.output[0].code;
-
-    await fs.ensureDir(publishPath);
-    await fs.writeFile(path.join(publishPath, publishFileName), bundle);
-
-    return {
-      type: 'node.js',
-      hashKey: hashBuilder.fromString(bundle),
-      src: publishFileName
-    };
-  } finally {
-    await fs.remove(tempFolder);
-  }
-}
-
-module.exports = callbackify(compileServer);

package/lib/to-publish/viteView.js

@@ -1,137 +0,0 @@
-const fs = require('fs-extra');
-const vite = require('vite');
-const path = require('path');
-const EnvironmentPlugin = require('vite-plugin-environment').default;
-const hashBuilder = require('oc-hash-builder');
-const ocViewWrapper = require('oc-view-wrapper');
-const { callbackify } = require('util');
-const cssModules = require('./cssModulesPlugin');
-
-const clientName = 'clientBundle';
-
-const partition = (array, predicate) => {
-  const matches = [];
-  const rest = [];
-  for (const element of array) {
-    if (predicate(element)) {
-      matches.push(element);
-    } else {
-      rest.push(element);
-    }
-  }
-  return [matches, rest];
-};
-
-async function compileView(options) {
-  function processRelativePath(relativePath) {
-    let pathStr = path.join(options.componentPath, relativePath);
-    if (process.platform === 'win32') {
-      return pathStr.split('\\').join('\\\\');
-    }
-    return pathStr;
-  }
-
-  const staticFiles = options.componentPackage.oc.files.static;
-  const staticFolder = Array.isArray(staticFiles) ? staticFiles[0] : staticFiles;
-  const viewFileName = options.componentPackage.oc.files.template.src;
-  const componentPath = options.componentPath;
-  const viewPath = processRelativePath(viewFileName);
-
-  const publishPath = options.publishPath;
-  const tempPath = path.join(publishPath, 'temp');
-  const publishFileName = options.publishFileName || 'template.js';
-  const componentPackage = options.componentPackage;
-  const externals = options.externals || [];
-  const production = !!options.production;
-  const viewExtension = viewFileName.match(/\.\w{1,5}$/)?.[0] ?? '.js';
-
-  const viewWrapperContent = options.viewWrapper({ viewPath });
-  const viewWrapperName = `_viewWrapperEntry${viewExtension}`;
-  const viewWrapperPAth = path.join(tempPath, viewWrapperName);
-
-  await fs.outputFile(viewWrapperPAth, viewWrapperContent);
-
-  const globals = externals.reduce((externals, dep) => {
-    externals[dep.name] = dep.global;
-    return externals;
-  }, {});
-
-  const baseConfig = await vite.loadConfigFromFile(process.cwd()).catch(() => null);
-  const basePlugins = baseConfig?.config?.plugins ?? [];
-
-  const result = await vite.build({
-    appType: 'custom',
-    root: componentPath,
-    mode: production ? 'production' : 'development',
-    plugins: [...options.plugins, EnvironmentPlugin(['NODE_ENV']), cssModules(), ...basePlugins],
-    logLevel: 'silent',
-    build: {
-      sourcemap: !production,
-      lib: { entry: viewWrapperPAth, formats: ['iife'], name: clientName },
-      write: false,
-      minify: production,
-      rollupOptions: {
-        external: Object.keys(globals),
-        output: {
-          globals
-        }
-      }
-    }
-  });
-  const out = Array.isArray(result) ? result[0] : result;
-  const bundle = out.output.find((x) => x.facadeModuleId.endsWith(viewWrapperName)).code;
-  const [cssAssets, otherAssets] = partition(
-    out.output.filter((x) => x.type === 'asset'),
-    (x) => x.fileName.endsWith('.css')
-  );
-  const cssStyles = cssAssets.map((x) => x.source.replace(/\r?\n/g, '') ?? '').join(' ').replace(/'/g, '"');
-  const bundleHash = hashBuilder.fromString(bundle);
-  const wrappedBundle = `(function() {
-    ${bundle}
-
-    return ${clientName};
-  })()`;
-
-  const shortTemplateType = options.componentPackage.oc.files.template.type
-    .replace('oc-template-', '')
-    .replace(/-/, '');
-  const templateId = `oc-${shortTemplateType}Root-${componentPackage.name}`;
-  const templateString = options.htmlTemplate({
-    templateId,
-    css: cssStyles,
-    externals,
-    bundle: wrappedBundle,
-    hash: bundleHash
-  });
-  const templateStringCompressed = production
-    ? templateString.replace(/\s+/g, ' ')
-    : templateString;
-  const hash = hashBuilder.fromString(templateStringCompressed);
-  const view = ocViewWrapper(hash, templateStringCompressed);
-
-  await fs.unlink(viewWrapperPAth);
-  await fs.mkdir(publishPath, { recursive: true });
-  await fs.writeFile(path.join(publishPath, publishFileName), view);
-  if (staticFolder) {
-    for (const asset of otherAssets) {
-      // asset.fileName could have paths like assets/file.js
-      // so we need to create those extra directories
-      await fs.ensureFile(path.join(publishPath, staticFolder, asset.fileName));
-      await fs.writeFile(
-        path.join(publishPath, staticFolder, asset.fileName),
-        asset.source,
-        'utf-8'
-      );
-    }
-  }
-
-  return {
-    template: {
-      type: options.componentPackage.oc.files.template.type,
-      hashKey: hash,
-      src: publishFileName
-    }
-  };
-}
-
-module.exports = callbackify(compileView);