oc-template-preact-compiler 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 OpenComponents community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# oc-template-preact-compiler - Compiler module
+
+OC template to compile components of type `oc-template-preact`

package/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const compile = require('./lib/compile');
+const template = require('oc-template-preact');
+
+module.exports = {
+  compile,
+  getCompiledTemplate: template.getCompiledTemplate,
+  getInfo: template.getInfo,
+  render: template.render
+};

package/lib/compile.js

@@ -0,0 +1,56 @@
+'use strict';
+
+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 = require('./to-publish/viteView');
+const viteServer = require('./to-publish/viteServer');
+const verifyTypeScriptSetup = require('./verifyConfig');
+const higherOrderServerTemplate = require('./higherOrderServerTemplate');
+const preactOCProviderTemplate = require('./preactOCProviderTemplate');
+const htmlTemplate = require('./htmlTemplate');
+
+const compiler = createCompile({
+  compileView: (options, cb) =>
+    viteView(
+      {
+        ...options,
+        plugins: [preact()],
+        viewWrapper: ({ viewPath }) => preactOCProviderTemplate({ viewPath }),
+        htmlTemplate,
+        externals: getInfo().externals
+      },
+      cb
+    ),
+  compileServer: (options, cb) =>
+    viteServer({ ...options, serverWrapper: higherOrderServerTemplate }, cb),
+  compileStatics,
+  getInfo
+});
+
+const hasTsExtension = (file) => !!file.match(/\.tsx?$/);
+
+// OPTIONS
+// =======
+// componentPath
+// componentPackage,
+// logger,
+// minify
+// ocPackage
+// publishPath
+// verbose,
+// watch,
+// production
+module.exports = function compile(options, callback) {
+  const viewFileName = options.componentPackage.oc.files.template.src;
+  const serverFileName = options.componentPackage.oc.files.data;
+  const usingTypescript = hasTsExtension(viewFileName) || hasTsExtension(serverFileName);
+
+  if (usingTypescript) {
+    verifyTypeScriptSetup(options.componentPath);
+  }
+
+  return compiler(options, callback);
+};

package/lib/higherOrderServerTemplate.js

@@ -0,0 +1,28 @@
+const removeExtension = (path) => path.replace(/\.(j|t)sx?$/, '');
+
+const higherOrderServerTemplate = ({ serverPath, componentName, componentVersion }) => `
+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({}, {
+      preactComponent: {
+        props
+      }
+    }));
+  });
+}
+`;
+
+module.exports = higherOrderServerTemplate;

package/lib/htmlTemplate.js

@@ -0,0 +1,26 @@
+const viewTemplate = ({ templateId, css, bundle, hash }) => `function(model){
+  var modelHTML =  model.__html ? model.__html : '';
+  var staticPath = model.preactComponent.props._staticPath;
+  var props = JSON.stringify(model.preactComponent.props);
+  window.oc = window.oc || {};
+  window.oc.__typescriptReactTemplate = window.oc.__typescriptReactTemplate || { count: 0 };
+  oc.preactComponents = oc.preactComponents || {};
+  oc.preactComponents['${hash}'] = oc.preactComponents['${hash}'] || (${bundle});
+  var count = window.oc.__typescriptReactTemplate.count;
+  var templateId = "${templateId}-" + count;
+  window.oc.__typescriptReactTemplate.count++;
+  return '<div id="' + templateId + '" class="${templateId}">' + modelHTML + '</div>' +
+    '${css ? '<style>' + css + '</style>' : ''}' +
+    '<script>' +
+    'window.oc = window.oc || {};' +
+    'oc.cmd = oc.cmd || [];' +
+    'oc.cmd.push(function(oc){' +
+    '${css ? "oc.events.fire(\\'oc:cssDidMount\\', \\'" + css + "\\');" : ''}' +
+      'var targetNode = document.getElementById("' + templateId + '");' +
+      'targetNode.setAttribute("id","");' +
+      'oc.preactComponents["${hash}"](' + props + ', targetNode);' +
+    '});' +
+  '</script>'
+}`;
+
+module.exports = viewTemplate;

package/lib/oc-app.d.ts

@@ -0,0 +1,72 @@
+interface OC {
+  conf: {
+    templates: Array<{
+      type: string;
+      externals: string[];
+    }>;
+  };
+  cmd: {
+    push: (cb: (oc: OC) => void) => void;
+  };
+  events: {
+    on: (eventName: string, fn: (...data: any[]) => void) => void;
+    off: (eventName: string, fn?: (...data: any[]) => void) => void;
+    fire: (eventName: string, data?: any) => void;
+    reset: () => void;
+  };
+  renderNestedComponent: (ocElement: HTMLElement, cb: () => void) => void;
+}
+
+declare global {
+  interface Window {
+    oc: OC;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'oc-component': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement> & { href: string },
+        HTMLElement
+      >;
+    }
+  }
+}
+
+export interface AcceptLanguage {
+  code: string;
+  script?: any;
+  region: string;
+  quality: number;
+}
+
+export interface Env {
+  name: string;
+}
+
+export interface Plugins {}
+
+export interface External {
+  global: string;
+  url: string;
+  name: string;
+}
+
+export interface Template {
+  type: string;
+  version: string;
+  externals: External[];
+}
+
+export interface Context<T = any, E = Env> {
+  acceptLanguage: AcceptLanguage[];
+  baseUrl: string;
+  env: E;
+  params: T;
+  plugins: Plugins;
+  requestHeaders: Record<string, string>;
+  requestIp: string;
+  setEmptyResponse: () => void;
+  setHeader: (header: string, value: string) => void;
+  staticPath: string;
+  templates: Template[];
+}

package/lib/preactOCProviderTemplate.js

@@ -0,0 +1,57 @@
+const removeExtension = (path) => path.replace(/\.(t|j)sx?$/, '');
+
+const preactOCProviderTemplate = ({ viewPath }) => `
+  import { render } from 'preact';
+  import { useEffect } from 'preact/hooks';
+  import View from '${removeExtension(viewPath)}';
+  import { DataProvider } from 'oc-template-typescript-react-compiler/utils/useData'
+
+  function OCProvider(props: any): any {
+    const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = props;
+
+    useEffect(() => {
+      (window as any).oc.events.fire('oc:componentDidMount', rest);
+    }, []);
+
+    function getData(providerProps: any, parameters: any, cb: (error: any, parameters?: any, props?: any) => void) {
+      return (window as any).oc.getData({
+        name: providerProps._componentName,
+        version: providerProps._componentVersion,
+        baseUrl: providerProps._baseUrl,
+        parameters
+      }, (err: any, data: any) => {
+        if (err) {
+          return cb(err);
+        }
+        cb(null, rest, data.preactComponent.props);
+      });
+    }
+
+    function getSetting(providerProps: any, setting: string) {
+      const settingHash = {
+        name: providerProps._componentName,
+        version: providerProps._componentVersion,
+        baseUrl: providerProps._baseUrl,
+        staticPath: providerProps._staticPath
+      };
+      return (settingHash as any)[setting];
+    }
+   
+    (rest as any).getData = (parameters: any, cb: (error: any, parameters?: any, props?: any) => void) => getData(props, parameters, cb);
+    (rest as any).getSetting = (setting: string) => getSetting(props, setting);
+
+    return (
+      <DataProvider value={{...rest}}>
+        <View { ...rest } />
+      </DataProvider>
+    );
+  }
+
+  function renderer(props, element) {
+    render(<OCProvider {...props} />, element);
+  }
+
+  export default renderer;
+`;
+
+module.exports = preactOCProviderTemplate;

package/lib/to-publish/cssModulesPlugin.js

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,75 @@
+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 result = await vite.build({
+      appType: 'custom',
+      root: componentPath,
+      mode: production ? 'production' : 'development',
+      plugins: options.plugins,
+      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

@@ -0,0 +1,134 @@
+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 result = await vite.build({
+    appType: 'custom',
+    root: componentPath,
+    mode: production ? 'production' : 'development',
+    plugins: [...options.plugins, EnvironmentPlugin(['NODE_ENV']), cssModules()],
+    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(/\n/g, '') ?? '').join(' ');
+  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);

package/lib/verifyConfig.js

@@ -0,0 +1,211 @@
+const chalk = require('chalk');
+const fs = require('fs');
+const resolve = require('resolve');
+const path = require('path');
+const os = require('os');
+const immer = require('immer').produce;
+
+function writeJson(fileName, object) {
+  fs.writeFileSync(fileName, JSON.stringify(object, null, 2).replace(/\n/g, os.EOL) + os.EOL);
+}
+
+function verifyTypeScriptSetup(componentPath) {
+  const paths = {
+    appTsConfig: path.resolve(componentPath, 'tsconfig.json'),
+    yarnLockFile: path.resolve(componentPath, 'yarn.lock'),
+    appNodeModules: path.resolve(componentPath, 'node_modules'),
+    appTypeDeclarations: path.resolve(componentPath, 'src', 'oc-app.d.ts')
+  };
+  let firstTimeSetup = false;
+
+  if (!fs.existsSync(paths.appTsConfig)) {
+    writeJson(paths.appTsConfig, {});
+    firstTimeSetup = true;
+  }
+
+  const isYarn = fs.existsSync(paths.yarnLockFile);
+
+  // Ensure typescript is installed
+  let ts;
+  try {
+    ts = require(resolve.sync('typescript', {
+      basedir: paths.appNodeModules
+    }));
+  } catch (_) {
+    console.error(
+      chalk.bold.red(
+        `It looks like you're trying to use TypeScript but do not have ${chalk.bold(
+          'typescript'
+        )} installed.`
+      )
+    );
+    console.error(
+      chalk.bold(
+        'Please install',
+        chalk.cyan.bold('typescript'),
+        'by running',
+        chalk.cyan.bold(isYarn ? 'yarn add typescript' : 'npm install typescript') + '.'
+      )
+    );
+    console.error();
+    process.exit(1);
+  }
+
+  const compilerOptions = {
+    // These are suggested values and will be set when not present in the
+    // tsconfig.json
+    // 'parsedValue' matches the output value from ts.parseJsonConfigFileContent()
+    target: {
+      parsedValue: ts.ScriptTarget.ES5,
+      suggested: 'es5'
+    },
+    lib: { suggested: ['dom', 'dom.iterable', 'esnext'] },
+    allowJs: { suggested: true },
+    skipLibCheck: { suggested: true },
+    esModuleInterop: { suggested: true },
+    allowSyntheticDefaultImports: { suggested: true },
+    strict: { suggested: true },
+    forceConsistentCasingInFileNames: { suggested: true },
+    // TODO: Enable for v4.0 (#6936)
+    // noFallthroughCasesInSwitch: { suggested: true },
+
+    // These values are required and cannot be changed by the user
+    // Keep this in sync with the rollup config
+    module: {
+      parsedValue: ts.ModuleKind.ESNext,
+      value: 'esnext',
+      reason: 'for import() and import/export'
+    },
+    moduleResolution: {
+      parsedValue: ts.ModuleResolutionKind.NodeJs,
+      value: 'node',
+      reason: 'to match rollup resolution'
+    },
+    resolveJsonModule: { value: true, reason: 'to match rollup loader' },
+    isolatedModules: { value: true, reason: 'implementation limitation' },
+    jsx: {
+      parsedValue: ts.JsxEmit.ReactJSX,
+      suggested: 'react-jsx'
+    },
+    paths: { value: undefined, reason: 'aliased imports are not supported' }
+  };
+
+  const formatDiagnosticHost = {
+    getCanonicalFileName: (fileName) => fileName,
+    getCurrentDirectory: ts.sys.getCurrentDirectory,
+    getNewLine: () => os.EOL
+  };
+
+  const messages = [];
+  let appTsConfig;
+  let parsedTsConfig;
+  let parsedCompilerOptions;
+  try {
+    const { config: readTsConfig, error } = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile);
+
+    if (error) {
+      throw new Error(ts.formatDiagnostic(error, formatDiagnosticHost));
+    }
+
+    appTsConfig = readTsConfig;
+
+    // Get TS to parse and resolve any "extends"
+    // Calling this function also mutates the tsconfig above,
+    // adding in "include" and "exclude", but the compilerOptions remain untouched
+    let result;
+    parsedTsConfig = immer(readTsConfig, (config) => {
+      result = ts.parseJsonConfigFileContent(config, ts.sys, path.dirname(paths.appTsConfig));
+    });
+
+    if (result.errors && result.errors.length) {
+      throw new Error(ts.formatDiagnostic(result.errors[0], formatDiagnosticHost));
+    }
+
+    parsedCompilerOptions = result.options;
+  } catch (e) {
+    if (e && e.name === 'SyntaxError') {
+      console.error(
+        chalk.red.bold(
+          'Could not parse',
+          chalk.cyan('tsconfig.json') + '.',
+          'Please make sure it contains syntactically correct JSON.'
+        )
+      );
+    }
+
+    console.log(e && e.message ? `${e.message}` : '');
+    process.exit(1);
+  }
+
+  if (appTsConfig.compilerOptions == null) {
+    appTsConfig.compilerOptions = {};
+    firstTimeSetup = true;
+  }
+
+  for (const option of Object.keys(compilerOptions)) {
+    const { parsedValue, value, suggested, reason } = compilerOptions[option];
+
+    const valueToCheck = parsedValue === undefined ? value : parsedValue;
+    const coloredOption = chalk.cyan('compilerOptions.' + option);
+
+    if (suggested != null) {
+      if (parsedCompilerOptions[option] === undefined) {
+        appTsConfig.compilerOptions[option] = suggested;
+        messages.push(
+          `${coloredOption} to be ${chalk.bold('suggested')} value: ${chalk.cyan.bold(
+            suggested
+          )} (this can be changed)`
+        );
+      }
+    } else if (parsedCompilerOptions[option] !== valueToCheck) {
+      appTsConfig.compilerOptions[option] = value;
+      messages.push(
+        `${coloredOption} ${chalk.bold(valueToCheck == null ? 'must not' : 'must')} be ${valueToCheck == null ? 'set' : chalk.cyan.bold(value)
+        }` + (reason != null ? ` (${reason})` : '')
+      );
+    }
+  }
+
+  // tsconfig will have the merged "include" and "exclude" by this point
+  if (parsedTsConfig.include == null) {
+    appTsConfig.include = ['src'];
+    messages.push(`${chalk.cyan('include')} should be ${chalk.cyan.bold('src')}`);
+  }
+
+  if (parsedTsConfig.exclude == null) {
+    appTsConfig.exclude = ['src/_package'];
+    messages.push(`${chalk.cyan('exclude')} should have ${chalk.cyan.bold('src/_package')}`);
+  }
+
+  if (messages.length > 0) {
+    if (firstTimeSetup) {
+      console.log(
+        chalk.bold('Your', chalk.cyan('tsconfig.json'), 'has been populated with default values.')
+      );
+      console.log();
+    } else {
+      console.warn(
+        chalk.bold(
+          'The following changes are being made to your',
+          chalk.cyan('tsconfig.json'),
+          'file:'
+        )
+      );
+      messages.forEach((message) => {
+        console.warn('  - ' + message);
+      });
+      console.warn();
+    }
+    writeJson(paths.appTsConfig, appTsConfig);
+  }
+
+  // Reference `oc-template-preact-compiler` types
+  if (!fs.existsSync(paths.appTypeDeclarations)) {
+    fs.writeFileSync(
+      paths.appTypeDeclarations,
+      `/// <reference types="oc-template-preact" />${os.EOL}`
+    );
+  }
+}
+
+module.exports = verifyTypeScriptSetup;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "oc-template-preact-compiler",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/guestlinelabs/oc-template-preact.git"
+  },
+  "bugs": {
+    "url": "https://github.com/guestlinelabs/oc-template-preact/issues"
+  },
+  "homepage": "https://github.com/guestlinelabs/oc-template-preact#readme",
+  "keywords": [
+    "oc",
+    "opencomponents",
+    "preact",
+    "oc-template"
+  ],
+  "author": {
+    "name": "Ricardo Devis Agullo",
+    "email": "mkredz@gmail.com"
+  },
+  "license": "MIT",
+  "types": "./lib/oc-app.d.ts",
+  "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.1",
+    "oc-view-wrapper": "1.0.3",
+    "preact": "^10.13.2",
+    "resolve": "^1.20.0",
+    "vite": "^4.2.1",
+    "vite-plugin-environment": "^1.1.3"
+  },
+  "peerDependencies": {
+    "preact": "^10"
+  },
+  "files": [
+    "index.js",
+    "lib",
+    "utils",
+    "scaffold",
+    "README.md",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "lodash": "^4.17.4",
+    "prettier": "^2.3.2",
+    "prettier-config-guestline": "2.0.0"
+  }
+}

package/scaffold/src/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app"]
+}

package/scaffold/src/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "base-component-react",
+  "description": "",
+  "version": "1.0.0",
+  "scripts": {
+    "lint": "eslint --max-warnings 0 --ext .js,.jsx,.ts,.tsx src",
+    "build": "tsc --noEmit && oc package .",
+    "test": "vitest"
+  },
+  "oc": {
+    "files": {
+      "data": "src/server.ts",
+      "template": {
+        "src": "src/App.tsx",
+        "type": "oc-template-preact"
+      },
+      "static": [
+        "public"
+      ]
+    },
+    "parameters": {
+      "userId": {
+        "default": 0,
+        "description": "The user id from the user database",
+        "example": 0,
+        "mandatory": true,
+        "type": "number"
+      }
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "jsdom": "^21.1.1",
+    "oc-template-preact": "0.0.1",
+    "oc-template-preact-compiler": "0.0.1",
+    "preact": "^10.13.2",
+    "typescript": "5.0.2",
+    "vitest": "^0.29.7"
+  }
+}

package/scaffold/src/src/App.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, afterEach, beforeEach, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { DataProvider } from 'oc-template-preact-compiler/utils/useData';
+
+import App from './App';
+
+const getData = vi.fn();
+
+describe('App - Page', () => {
+  beforeEach(() => {
+    window.oc = { events: { on: vi.fn(), fire: vi.fn() } } as any;
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('Gets more data when clicking the button', () => {
+    getData.mockImplementationOnce(() => Promise.resolve({}));
+    render(
+      <DataProvider value={{ firstName: 'firstName', lastName: 'lastName', userId: 0, getData }}>
+        <App firstName="firstName" lastName="lastName" userId={0} />
+      </DataProvider>
+    );
+
+    const extraInfoButton = screen.getByText(/Get extra information/i);
+    expect(extraInfoButton).toBeTruthy();
+  });
+});

package/scaffold/src/src/App.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'preact/hooks';
+import { useData } from 'oc-template-preact-compiler/utils/useData';
+import styles from './styles.css';
+import type { AdditionalData, ClientProps } from './types';
+
+interface AppProps extends ClientProps {
+  getMoreData?: boolean;
+}
+
+const App = () => {
+  const { firstName, lastName, userId, getData, getSetting } = useData<AppProps>();
+  const staticPath = getSetting('staticPath');
+  const [additionalData, setAdditionalData] = useState<AdditionalData | null>(null);
+  const [error, setError] = useState('');
+
+  const fetchMoreData = async () => {
+    setError('');
+    try {
+      const data = await getData({ userId, getMoreData: true });
+      setAdditionalData(data);
+    } catch (err) {
+      setError(String(err));
+    }
+  };
+
+  if (error) {
+    return <div>Something wrong happened!</div>;
+  }
+
+  return (
+    <div className={styles.container}>
+      <img width="50" height="50" src={`${staticPath}/public/logo.png`} alt="Logo" />
+      <h1 style={{ margin: '0 0 20px 0' }}>
+        Hello, <span style={{ textDecoration: 'underline' }}>{firstName}</span> {lastName}
+      </h1>
+      {additionalData && (
+        <div className={styles.info}>
+          <div className={styles.block}>Age: {additionalData.age}</div>
+          <div className={styles.block}>
+            Hobbies: {additionalData.hobbies.map((x) => x.toLowerCase()).join(', ')}
+          </div>
+        </div>
+      )}
+      <button className={styles.button} onClick={fetchMoreData}>
+        Get extra information
+      </button>
+    </div>
+  );
+};
+
+export default App;

package/scaffold/src/src/oc-app.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="oc-template-preact" />
+/// <reference types="vite/client" />

package/scaffold/src/src/server.ts

@@ -0,0 +1,34 @@
+import { Context } from 'oc-template-preact-compiler';
+import { AdditionalData, ClientProps, OcParameters } from './types';
+
+const database = [
+  { name: 'John Doe', age: 34, hobbies: ['Swimming', 'Basketball'] },
+  { name: 'Jane Doe', age: 35, hobbies: ['Running', 'Rugby'] }
+];
+
+async function getUser(userId: number) {
+  return database[userId];
+}
+
+export async function data(
+  context: Context<OcParameters>,
+  callback: (error: any, data: ClientProps | AdditionalData) => void
+) {
+  const { userId } = context.params;
+  const user = await getUser(userId);
+  const shouldGetMoreData = context.params.getMoreData;
+  const [firstName, lastName] = user.name.split(/\s+/);
+
+  if (shouldGetMoreData) {
+    return callback(null, {
+      age: user.age,
+      hobbies: user.hobbies
+    });
+  }
+
+  return callback(null, {
+    userId,
+    firstName,
+    lastName
+  });
+}

package/scaffold/src/src/setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/scaffold/src/src/styles.css

@@ -0,0 +1,30 @@
+.container {
+  background-color: #3b246c;
+  color: #fff;
+  font-family: sans-serif;
+  padding: 40px;
+}
+
+.button {
+  background-color: #a97613;
+  border: none;
+  padding: 15px 32px;
+  text-align: center;
+  font-size: 16px;
+  text-decoration: none;
+  display: inline-block;
+  color: inherit;
+  cursor: pointer;
+}
+
+.info {
+  margin-bottom: 20px;
+}
+
+.block {
+  margin: 6px 0;
+}
+
+.button:hover {
+  background-color: #c79535;
+}

package/scaffold/src/src/types.ts

@@ -0,0 +1,15 @@
+export interface OcParameters {
+  userId: number;
+  getMoreData?: boolean;
+}
+
+export interface AdditionalData {
+  hobbies: string[];
+  age: number;
+}
+
+export interface ClientProps extends Partial<AdditionalData> {
+  userId: number;
+  firstName: string;
+  lastName: string;
+}

package/scaffold/src/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // These are suggested values and will be set when not present in the
+    // tsconfig.json
+    // 'parsedValue' matches the output value from ts.parseJsonConfigFileContent()
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // These values are required and cannot be changed by the user
+    // Keep this in sync with the rollup config
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": ["src"],
+  "exclude": ["src/_package"]
+}

package/scaffold/src/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // @ts-ignore Missing test property
+  test: {
+    environment: 'jsdom'
+  }
+});

package/utils/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  env: {
+    commonjs: false
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  extends: '../../../.eslintrc.js'
+};

package/utils/useData.tsx

@@ -0,0 +1,40 @@
+import { createContext } from 'preact';
+import { useCallback, useContext } from 'preact/hooks';
+
+const DataContext = createContext<any>({});
+
+type Data<T = any> = T & {
+  getData(parameters: T, cb: (err: Error | null, data: any) => void): void;
+  getSetting(setting: 'name' | 'version' | 'baseUrl' | 'staticPath'): string;
+};
+
+type PromiseData<T = any> = T & {
+  getData<O = any>(parameters?: Partial<T>): Promise<O>;
+  getSetting(setting: 'name' | 'version' | 'baseUrl' | 'staticPath'): string;
+};
+
+export const DataProvider = ({ children, ...props }: any) => {
+  // @ts-ignore children props
+  return <DataContext.Provider value={props}>{children}</DataContext.Provider>;
+};
+
+export function useData<T = any>(): PromiseData<T> {
+  const {
+    value: { getData, ...rest }
+  }: { value: Data<T> } = useContext(DataContext);
+  const asyncGetData = useCallback(<O = any, I = any>(data: I) => {
+    return new Promise<O>((resolve, reject) => {
+      // @ts-ignore
+      getData({ ...rest, ...data }, (err, newData) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(newData);
+        }
+      });
+    });
+  }, []);
+
+  // @ts-ignore
+  return { getData: asyncGetData, ...rest };
+}