oc-template-react-compiler 5.2.1 → 6.0.0

package/README.md

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

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/compile';
+export * from 'oc-template-react';

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/compile"), exports);
+__exportStar(require("oc-template-react"), exports);

package/dist/lib/compile.d.ts

@@ -0,0 +1,3 @@
+import { createCompile } from 'oc-generic-template-compiler';
+export type CompilerOptions = ReturnType<typeof createCompile>;
+export declare const compile: CompilerOptions;

package/dist/lib/compile.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compile = void 0;
+const oc_generic_template_compiler_1 = require("oc-generic-template-compiler");
+const oc_statics_compiler_1 = __importDefault(require("oc-statics-compiler"));
+const oc_template_react_1 = require("oc-template-react");
+const oc_vite_compiler_1 = require("oc-vite-compiler");
+const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+const reactOCProviderTemplate_1 = __importDefault(require("./reactOCProviderTemplate"));
+const htmlTemplate_1 = __importDefault(require("./htmlTemplate"));
+exports.compile = (0, oc_generic_template_compiler_1.createCompile)({
+    compileView: (options, cb) => (0, oc_vite_compiler_1.viteView)({
+        ...options,
+        plugins: [plugin_react_1.default()],
+        viewWrapper: ({ viewPath }) => (0, reactOCProviderTemplate_1.default)({ viewPath }),
+        htmlTemplate: htmlTemplate_1.default,
+        externals: (0, oc_template_react_1.getInfo)().externals
+    }, cb),
+    compileServer: oc_vite_compiler_1.viteServer,
+    compileStatics: oc_statics_compiler_1.default,
+    getInfo: oc_template_react_1.getInfo
+});
+// OPTIONS
+// =======
+// componentPath
+// componentPackage,
+// logger,
+// minify
+// ocPackage
+// publishPath
+// verbose,
+// watch,
+// production

package/dist/lib/htmlTemplate.d.ts

@@ -0,0 +1,10 @@
+export default function viewTemplate({ templateId, css, externals, bundle, hash }: {
+    templateId: string;
+    css: string;
+    externals: Array<{
+        name: string;
+        global: string;
+    }>;
+    bundle: string;
+    hash: string;
+}): string;

package/dist/lib/htmlTemplate.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const cssesc_1 = __importDefault(require("cssesc"));
+function viewTemplate({ templateId, css, externals, bundle, hash }) {
+    return `function(model){
+  oc.reactComponents = oc.reactComponents || {};
+  oc.reactComponents['${hash}'] = oc.reactComponents['${hash}'] || (${bundle});
+  if (!model) return;
+  var modelHTML =  model.__html ? model.__html : '';
+  var staticPath = model.component.props._staticPath;
+  var props = JSON.stringify(model.component.props);
+  oc = oc || {};
+  oc.__typescriptReactTemplate = oc.__typescriptReactTemplate || { count: 0 };
+  var count = oc.__typescriptReactTemplate.count;
+  var templateId = "${templateId}-" + count;
+  oc.__typescriptReactTemplate.count++;
+  return '<div id="' + templateId + '" class="${templateId}">' + modelHTML + '</div>' +
+    '${css ? '<style>' + (0, cssesc_1.default)(css) + '</style>' : ''}' +
+    '<script>' +
+    'oc = oc || {};' +
+    'oc.cmd = oc.cmd || [];' +
+    'oc.cmd.push(function(oc){' +
+    '${css ? "oc.events.fire(\\'oc:cssDidMount\\', \\'" + css + "\\');" : ''}' +
+      'oc.requireSeries(${JSON.stringify(externals)}, function(){' +
+        'var targetNode = document.getElementById("' + templateId + '");' +
+        'targetNode.setAttribute("id","");' +
+        'var reactElement = React.createElement(oc.reactComponents["${hash}"],' +  props + ');' +
+        'if (ReactDOM.createRoot) {' +
+          'if (' + !!modelHTML  + ') {' + 
+            'var root = ReactDOM.hydrateRoot(targetNode, reactElement);' +
+            'root.render(reactElement);' +
+          '} else {' +
+            'var root = ReactDOM.createRoot(targetNode);' +
+            'root.render(reactElement);' +
+          '}' +
+        '} else {' +
+          'if (' + !!modelHTML  + ') {' + 
+            'ReactDOM.hydrate(reactElement, targetNode);' +
+          '} else {' +
+            'ReactDOM.render(reactElement, targetNode);' +
+          '}' +
+        '}' +
+      '});' +
+    '});' +
+  '</script>'
+}`;
+}
+exports.default = viewTemplate;

package/dist/lib/reactOCProviderTemplate.d.ts

@@ -0,0 +1,3 @@
+export default function reactOCProviderTemplate({ viewPath }: {
+    viewPath: string;
+}): string;

package/dist/lib/reactOCProviderTemplate.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const removeExtension = (path) => path.replace(/\.(t|j)sx?$/, '');
+function reactOCProviderTemplate({ viewPath }) {
+    return `
+  import React from 'react';
+  import View from '${removeExtension(viewPath)}';
+  import { DataProvider } from 'oc-template-react-compiler/dist/utils/useData'
+
+  class OCProvider extends React.Component {
+    componentDidMount(){
+      const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = (this.props as any);
+      (window as any).oc.events.fire('oc:componentDidMount',  rest);
+    }
+
+    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);
+        }
+        const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = (data.component.props as any); 
+        cb(null, rest, data.component.props);
+      });
+    }
+
+    getSetting(providerProps: any, setting: string) {
+      const settingHash = {
+        name: providerProps._componentName,
+        version: providerProps._componentVersion,
+        baseUrl: providerProps._baseUrl,
+        staticPath: providerProps._staticPath
+      };
+      return (settingHash as any)[setting];
+    }
+
+    render() {
+      const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = (this.props as any);
+      (rest as any).getData = (parameters: any, cb: (error: any, parameters?: any, props?: any) => void) => this.getData(this.props, parameters, cb);
+      (rest as any).getSetting = (setting: string) => this.getSetting(this.props, setting);
+      return (
+        <DataProvider value={{...rest}}>
+          <View { ...rest } />
+        </DataProvider>
+      );
+    }
+  }
+
+  export default OCProvider
+`;
+}
+exports.default = reactOCProviderTemplate;

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './useData';

package/dist/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useData"), exports);

package/dist/utils/useData.d.ts

@@ -0,0 +1,7 @@
+type PromiseData<T = any> = T & {
+    getData<O = any>(parameters?: Partial<T>): Promise<O>;
+    getSetting(setting: 'name' | 'version' | 'baseUrl' | 'staticPath'): string;
+};
+export declare const DataProvider: ({ children, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare function useData<T = any>(): PromiseData<T>;
+export {};

package/dist/utils/useData.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useData = exports.DataProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const DataContext = react_1.default.createContext({});
+const DataProvider = ({ children, ...props }) => {
+    return (0, jsx_runtime_1.jsx)(DataContext.Provider, { value: props, children: children });
+};
+exports.DataProvider = DataProvider;
+function useData() {
+    const { value: { getData, ...rest } } = react_1.default.useContext(DataContext);
+    const asyncGetData = react_1.default.useCallback((data) => {
+        return new Promise((resolve, reject) => {
+            // @ts-ignore
+            getData({ ...rest, ...data }, (err, newData) => {
+                if (err) {
+                    reject(err);
+                }
+                else {
+                    resolve(newData);
+                }
+            });
+        });
+    }, []);
+    return { getData: asyncGetData, ...rest };
+}
+exports.useData = useData;

package/package.json

@@ -1,16 +1,22 @@
 {
   "name": "oc-template-react-compiler",
-  "version": "5.2.1",
-  "description": "OC-Template-REACT-Compiler",
-  "main": "index.js",
+  "version": "6.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/opencomponents/oc-template-react.git"
+    "url": "https://github.com/opencomponents/vite-templates.git"
   },
   "bugs": {
-    "url": "https://github.com/opencomponents/oc-template-react/issues"
+    "url": "https://github.com/opencomponents/vite-templates/issues"
   },
-  "homepage": "https://github.com/opencomponents/oc-template-react#readme",
+  "homepage": "https://github.com/opencomponents/vite-templates#readme",
   "keywords": [
     "oc",
     "opencomponents",
@@ -18,49 +24,33 @@
     "oc-template"
   ],
   "author": {
-    "name": "Nick Balestra",
-    "email": "nick@balestra.ch"
+    "name": "Ricardo Devis Agullo",
+    "email": "mkredz@gmail.com"
   },
   "license": "MIT",
   "dependencies": {
-    "async": "2.6.3",
-    "autoprefixer": "9.6.2",
-    "babel-loader": "7.1.5",
-    "babel-minify-webpack-plugin": "0.3.1",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-preset-env": "1.7.0",
-    "babel-preset-react": "6.24.1",
-    "css-loader": "1.0.1",
-    "fs-extra": "8.1.0",
-    "infinite-loop-loader": "1.0.6",
-    "lodash": "4.17.19",
-    "memory-fs": "0.4.1",
-    "mini-css-extract-plugin": "0.8.0",
-    "node-dir": "0.1.17",
-    "oc-external-dependencies-handler": "1.0.8",
-    "oc-generic-template-compiler": "2.0.5",
-    "oc-get-unix-utc-timestamp": "1.0.2",
-    "oc-hash-builder": "1.0.2",
-    "oc-minify-file": "1.0.15",
-    "oc-react-component-wrapper": "1.0.2",
-    "oc-statics-compiler": "2.0.11",
-    "oc-template-react": "2.1.0",
-    "oc-templates-messages": "1.0.2",
-    "oc-view-wrapper": "1.0.3",
-    "postcss-extend": "1.0.5",
-    "postcss-icss-values": "2.0.2",
-    "postcss-import": "12.0.1",
-    "postcss-loader": "3.0.0",
-    "prop-types": "15.7.2",
-    "react": "16.9.0",
-    "webpack": "4.41.0"
+    "@vitejs/plugin-react": "^4.0.0",
+    "chalk": "^3.0.0",
+    "cssesc": "^3.0.0",
+    "immer": "^9.0.6",
+    "oc-generic-template-compiler": "2.1.0",
+    "oc-statics-compiler": "2.1.1",
+    "oc-template-react": "4.0.0",
+    "oc-vite-compiler": "3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "resolve": "^1.20.0"
   },
   "files": [
-    "index.js",
-    "lib",
-    "utils",
-    "scaffold",
-    "README.md",
-    "LICENSE"
-  ]
-}
+    "dist/**",
+    "scaffold"
+  ],
+  "devDependencies": {
+    "@types/cssesc": "^3.0.2",
+    "@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

@@ -2,25 +2,43 @@
   "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": "server.js",
+      "data": "src/server.ts",
       "template": {
-        "src": "app.js",
+        "src": "src/App.tsx",
         "type": "oc-template-react"
-      }
+      },
+      "static": [
+        "public"
+      ]
     },
     "parameters": {
-      "name": {
-        "default": "World",
-        "description": "Your name",
-        "example": "Jane Doe",
-        "mandatory": false,
-        "type": "string"
+      "userId": {
+        "default": 1,
+        "description": "The user id from the user database",
+        "example": 1,
+        "mandatory": true,
+        "type": "number"
       }
     }
   },
+  "dependencies": {},
   "devDependencies": {
-    "oc-template-react-compiler": "*"
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.0.28",
+    "jsdom": "^21.1.1",
+    "oc-server": "*",
+    "oc-template-react-compiler": "6.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.1.3",
+    "vitest": "^0.32.2"
   }
-}
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { describe, it, afterEach, beforeEach, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { DataProvider } from 'oc-template-react-compiler/dist/utils/useData';
+
+import App from './App';
+
+const getData = vi.fn();
+const getSetting = 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({}));
+    getSetting.mockImplementationOnce(() => ({}));
+    render(
+      <DataProvider
+        value={{
+          firstName: 'firstName',
+          lastName: 'lastName',
+          userId: 0,
+          getData,
+          getSetting
+        }}
+      >
+        <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,52 @@
+import { useState } from 'react';
+import { useData } from 'oc-template-react-compiler/dist/utils/useData';
+import { serverClient } from 'oc-server';
+import styles from './styles.css';
+import logo from '../public/logo.png';
+import type { AdditionalData, ClientProps } from './types';
+
+interface AppProps extends ClientProps {
+  getMoreData?: boolean;
+}
+
+const App: React.FC<ClientProps> = () => {
+  const { firstName, lastName, userId, getData } = useData<AppProps>();
+  const [additionalData, setAdditionalData] = useState<AdditionalData | null>(null);
+  const [error, setError] = useState('');
+
+  const fetchMoreData = async () => {
+    setError('');
+    try {
+      const data = await serverClient.getMoreData({ userId });
+      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={logo} 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 @@
+/// <reference types="oc-vite/client" />

package/scaffold/src/src/server.ts

@@ -0,0 +1,37 @@
+import { Server } from 'oc-server';
+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 const server = new Server(async (params: OcParameters): Promise<ClientProps> => {
+  const { userId } = params;
+  const user = await getUser(userId);
+  const [firstName, lastName] = user.name.split(/\s+/);
+
+  return {
+    userId,
+    firstName,
+    lastName
+  };
+}).action('getMoreData', async (params: OcParameters): Promise<AdditionalData> => {
+  const { userId } = params;
+  const user = await getUser(userId);
+
+  return {
+    age: user.age,
+    hobbies: user.hobbies
+  };
+});
+
+declare module 'oc-server' {
+  interface Register {
+    server: typeof server;
+  }
+}

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,26 @@
+{
+  "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"
+  },
+  "include": ["src"],
+  "exclude": ["src/_package"]
+}

package/scaffold/src/vite.config.ts

@@ -0,0 +1,11 @@
+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'
+  }
+});