oc-template-react-compiler 6.0.2 → 6.0.4

package/dist/lib/reactOCProviderTemplate.d.ts

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

package/dist/lib/reactOCProviderTemplate.js

@@ -1,53 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const removeExtension = (path) => path.replace(/\.(t|j)sx?$/, '');
-function reactOCProviderTemplate({ viewPath }) {
+function reactOCProviderTemplate({ viewPath, providerFunctions }) {
     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);
-    }
+  function OCProvider(props) {
+    const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = props;
 
-    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);
-      });
-    }
+    React.useEffect(() => {
+      window.oc.events.fire('oc:componentDidMount', rest);
+    }, []);
 
-    getSetting(providerProps: any, setting: string) {
-      const settingHash = {
-        name: providerProps._componentName,
-        version: providerProps._componentVersion,
-        baseUrl: providerProps._baseUrl,
-        staticPath: providerProps._staticPath
-      };
-      return (settingHash as any)[setting];
-    }
+    ${providerFunctions}
+   
+    rest.getData = getData;
+    rest.getSetting = getSetting;
 
-    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>
-      );
-    }
+    return (
+      <DataProvider value={{...rest}}>
+        <View { ...rest } />
+      </DataProvider>
+    );
   }
 
   function renderer(props, element, ssr) {
@@ -66,6 +42,8 @@ function reactOCProviderTemplate({ viewPath }) {
     }
   }
 
+  renderer.component = OCProvider;
+
   export default renderer;
 `;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oc-template-react-compiler",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "description": "Compiler for the React OC template",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,8 +30,8 @@
   "license": "MIT",
   "dependencies": {
     "@vitejs/plugin-react": "^4.0.0",
-    "oc-template-react": "^4.0.0",
-    "oc-vite-compiler": "^3.2.0",
+    "oc-template-react": "^4.0.1",
+    "oc-vite-compiler": "^3.4.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

package/scaffold/src/package.json

@@ -35,7 +35,7 @@
     "@types/react": "^18.0.28",
     "jsdom": "^21.1.1",
     "oc-server": "*",
-    "oc-template-react-compiler": "6.0.0",
+    "oc-template-react-compiler": "^6.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.1.3",

package/scaffold/src/src/App.tsx

@@ -1,23 +1,21 @@
 import { useState } from 'react';
-import { useData } from 'oc-template-react-compiler/dist/utils/useData';
-import { serverClient } from 'oc-server';
+import { serverClient, InitialData, ActionOutput } 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;
-}
+type AdditionalData = ActionOutput<'getMoreData'>;
 
-const App: React.FC<ClientProps> = () => {
-  const { firstName, lastName, userId, getData } = useData<AppProps>();
-  const [additionalData, setAdditionalData] = useState<AdditionalData | null>(null);
+const App: React.FC<InitialData> = (props: InitialData) => {
+  const { firstName, lastName, born, hobbies } = props;
+  const [additionalData, setAdditionalData] = useState<AdditionalData | null>(
+    null
+  );
   const [error, setError] = useState('');
 
   const fetchMoreData = async () => {
     setError('');
     try {
-      const data = await serverClient.getMoreData({ userId });
+      const data = await serverClient.getMoreData({ year: born });
       setAdditionalData(data);
     } catch (err) {
       setError(String(err));
@@ -32,18 +30,18 @@ const App: React.FC<ClientProps> = () => {
     <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}
+        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 className={styles.info}>
+        <div className={styles.block}>Born: {born}</div>
+        <div className={styles.block}>
+          Hobbies: {hobbies.map((x) => x.toLowerCase()).join(', ')}
         </div>
-      )}
+      </div>
+      {additionalData && <div>{additionalData.funFact}</div>}
       <button className={styles.button} onClick={fetchMoreData}>
-        Get extra information
+        Fun year fact
       </button>
     </div>
   );

package/scaffold/src/src/server.ts

@@ -1,32 +1,45 @@
 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'] }
+const userDatabase = [
+  { name: 'John Doe', born: 1986, hobbies: ['Swimming', 'Basketball'] },
+  { name: 'Jane Doe', born: 1991, hobbies: ['Running', 'Rugby'] },
 ];
 
+const yearsFunFactDatabase: Record<number, string> = {
+  1986: "Halley's Comet made its closest approach to Earth in 1986, visible to the naked eye.",
+  1987: 'The first Final Fantasy game was released in 1987.',
+  1991: 'The first web page was created in 1991 by Tim Berners-Lee.',
+};
+
 async function getUser(userId: number) {
-  return database[userId];
+  return userDatabase[userId];
+}
+
+async function getFunFact(year: number) {
+  return yearsFunFactDatabase[year];
 }
 
-export const server = new Server(async (params: OcParameters): Promise<ClientProps> => {
+export const server = new Server(async (params: { userId: number }) => {
   const { userId } = params;
   const user = await getUser(userId);
   const [firstName, lastName] = user.name.split(/\s+/);
 
+  if (firstName === 'Invalid') {
+    return;
+  }
+
   return {
-    userId,
     firstName,
-    lastName
+    lastName,
+    born: user.born,
+    hobbies: user.hobbies,
   };
-}).action('getMoreData', async (params: OcParameters): Promise<AdditionalData> => {
-  const { userId } = params;
-  const user = await getUser(userId);
+}).action('getMoreData', async (params: { year: number }) => {
+  const { year } = params;
+  const funFact = await getFunFact(year);
 
   return {
-    age: user.age,
-    hobbies: user.hobbies
+    funFact,
   };
 });