create-oc 0.0.1

package/index.js

@@ -0,0 +1,63 @@
+import prompts from 'prompts';
+import fs from 'fs';
+
+const { componentName, template } = await prompts([
+  {
+    type: 'text',
+    name: 'componentName',
+    message: 'Component name',
+    initial: 'oc-component',
+  },
+  {
+    type: 'select',
+    name: 'template',
+    message: 'Select a template',
+    choices: [
+      { title: 'Vanilla', value: 'es6' },
+      { title: 'React', value: 'react' },
+      { title: 'Solid', value: 'solid' },
+      { title: 'Preact', value: 'preact' },
+      { title: 'Elm', value: 'elm' },
+    ],
+  },
+]);
+
+try {
+  fs.mkdirSync(`./${componentName}`);
+} catch (err) {
+  if (err.code === 'EEXIST') {
+    console.log('Folder already exists');
+    process.exit(1);
+  }
+  throw err;
+}
+
+console.log();
+console.log('Creating the template');
+fs.cpSync(`./templates/${template}`, `./${componentName}`, {
+  recursive: true,
+});
+fs.writeFileSync(
+  `./${componentName}/.gitignore`,
+  ['node_modules', '_package'].join('\n'),
+  'utf-8'
+);
+replaceJson(`./${componentName}/package.json`, (pkg) => ({
+  ...pkg,
+  scripts: {
+    ...(pkg.scripts || {}),
+    start: `oc dev .. --components ${componentName}`,
+  },
+}));
+
+console.log('Finished. To start your oc for the first time:');
+console.log();
+console.log(`  cd ${componentName}`);
+console.log('  npm install');
+console.log('  npm start');
+
+function replaceJson(file, transformer) {
+  const json = JSON.parse(fs.readFileSync(file, 'utf-8'));
+  const transformed = transformer(json);
+  fs.writeFileSync(file, JSON.stringify(transformed, null, 2), 'utf-8');
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "create-oc",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "prompts": "^2.4.2"
+  }
+}

package/templates/elm/elm.json

@@ -0,0 +1,26 @@
+{
+  "type": "application",
+  "source-directories": [
+      "src"
+  ],
+  "elm-version": "0.19.1",
+  "dependencies": {
+      "direct": {
+          "elm/browser": "1.0.2",
+          "elm/core": "1.0.5",
+          "elm/html": "1.0.0",
+          "elm/json": "1.1.3",
+          "rtfeldman/elm-css": "16.1.1"
+      },
+      "indirect": {
+          "elm/time": "1.0.0",
+          "elm/url": "1.0.0",
+          "elm/virtual-dom": "1.0.2",
+          "rtfeldman/elm-hex": "1.0.0"
+      }
+  },
+  "test-dependencies": {
+      "direct": {},
+      "indirect": {}
+  }
+}

package/templates/elm/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "base-component-elm",
+  "description": "",
+  "version": "1.0.0",
+  "scripts": {},
+  "oc": {
+    "files": {
+      "data": "src/server.ts",
+      "template": {
+        "src": "src/Main.elm",
+        "type": "oc-template-elm"
+      }
+    },
+    "parameters": {
+      "userId": {
+        "default": 1,
+        "description": "The user id from the user database",
+        "example": 1,
+        "mandatory": true,
+        "type": "number"
+      }
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "oc-server": "*",
+    "oc-template-elm-compiler": "*",
+    "elm": "*",
+    "typescript": "*"
+  }
+}

package/templates/elm/src/Main.elm

@@ -0,0 +1,180 @@
+port module Main exposing (..)
+
+import Browser
+import Css exposing (..)
+import Html.Styled exposing (..)
+import Html.Styled.Attributes exposing (..)
+import Html.Styled.Events exposing (onClick)
+import Json.Decode as D
+import Json.Encode as E
+
+
+
+-- MAIN
+
+
+main : Program E.Value Model Msg
+main =
+    Browser.element
+        { init = init
+        , view = view >> toUnstyled
+        , update = update
+        , subscriptions = subscriptions
+        }
+
+
+
+-- MODEL
+
+
+type alias Model =
+    { userId : Int, name : String, email : String, age : Maybe Int }
+
+
+type alias DataRequest =
+    { userId : Int }
+
+
+encode : DataRequest -> E.Value
+encode data =
+    E.object
+        [ ( "userId", E.int data.userId )
+        , ( "moreData", E.bool True )
+        ]
+
+
+init : E.Value -> ( Model, Cmd Msg )
+init flags =
+    ( case D.decodeValue decoder flags of
+        Ok model ->
+            model
+
+        Err _ ->
+            { name = "", email = "", userId = 0, age = Nothing }
+    , Cmd.none
+    )
+
+
+isJust : Maybe a -> Bool
+isJust data =
+    case data of
+        Nothing ->
+            False
+
+        _ ->
+            True
+
+
+
+-- UPDATE
+
+
+type Msg
+    = GetData
+    | Recv E.Value
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        GetData ->
+            ( model, DataRequest model.userId |> encode |> getData )
+
+        Recv data ->
+            ( case D.decodeValue decoder data of
+                Ok newModel ->
+                    newModel
+
+                Err _ ->
+                    { name = "", email = "", userId = 0, age = Nothing }
+            , Cmd.none
+            )
+
+
+
+-- VIEW
+
+
+inputStyle : Style
+inputStyle =
+    Css.batch
+        [ border3 (px 5) solid (rgb 255 240 255)
+        , boxShadow5 inset zero zero (px 8) (rgba 0 0 0 0.1)
+        , padding (px 15)
+        , backgroundColor (rgba 255 255 255 0.5)
+        , margin (px 10)
+        ]
+
+
+htmlIf : Html msg -> Bool -> Html msg
+htmlIf el cond =
+    if cond then
+        el
+
+    else
+        text ""
+
+
+view : Model -> Html Msg
+view model =
+    div
+        [ css
+            [ padding (px 20)
+            ]
+        ]
+        [ input
+            [ css [ inputStyle ]
+            , type_ "text"
+            , placeholder "Name"
+            , value model.name
+            ]
+            []
+        , input
+            [ css [ inputStyle ]
+            , type_ "text"
+            , placeholder "Email"
+            , value model.email
+            ]
+            []
+        , case model.age of
+            Nothing ->
+                text ""
+
+            Just age ->
+                input
+                    [ css [ inputStyle ]
+                    , type_ "number"
+                    , placeholder "Age"
+                    , String.fromInt age |> value
+                    ]
+                    []
+        , button [ onClick GetData ] [ text "Get more data" ]
+        ]
+
+
+
+-- SUBSCRIPTIONS
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    dataReceiver Recv
+
+
+decoder : D.Decoder Model
+decoder =
+    D.map4 Model
+        (D.field "userId" D.int)
+        (D.field "name" D.string)
+        (D.field "email" D.string)
+        (D.maybe (D.field "age" D.int))
+
+
+
+-- PORTS
+
+
+port getData : E.Value -> Cmd msg
+
+
+port dataReceiver : (E.Value -> msg) -> Sub msg

package/templates/elm/src/server.ts

@@ -0,0 +1,22 @@
+import { Server } from 'oc-server';
+
+const database = [
+  { name: 'John Doe', email: 'john@doe.com', age: 32 },
+  { name: 'Jane Doe', email: 'jane@doe.com', age: 31 }
+];
+
+async function getUser(userId: number) {
+  return database[userId];
+}
+
+export const server = new Server(async (params: { userId: number; moreData?: boolean }) => {
+  const { moreData, userId } = params;
+  const { email, name, age } = await getUser(userId);
+
+  return {
+    userId,
+    name,
+    email,
+    age: moreData && age
+  };
+});

package/templates/elm/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src"],
+  "exclude": ["src/_package"]
+}

package/templates/es6/css/styles.css

@@ -0,0 +1,3 @@
+.awesome {
+  background: palevioletred;
+}

package/templates/es6/oc-app.d.ts

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

package/templates/es6/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "base-component-es6",
+  "description": "",
+  "version": "1.0.0",
+  "oc": {
+    "files": {
+      "data": "server.js",
+      "static": [
+        "img",
+        "css"
+      ],
+      "template": {
+        "src": "view.js",
+        "type": "oc-template-es6"
+      }
+    },
+    "parameters": {
+      "name": {
+        "default": "Jane Doe",
+        "description": "Your name",
+        "example": "Jane Doe",
+        "mandatory": false,
+        "type": "string"
+      }
+    }
+  },
+  "devDependencies": {
+    "oc-server": "*",
+    "oc-template-es6-compiler": "*"
+  }
+}

package/templates/es6/server.ts

@@ -0,0 +1,11 @@
+import { Server } from "oc-server";
+
+export const server = new Server((params: { name: string }, context) => {
+  const { name } = params;
+  const { staticPath } = context;
+
+  return {
+    name,
+    staticPath,
+  };
+});

package/templates/es6/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  }
+}

package/templates/es6/view.ts

@@ -0,0 +1,10 @@
+import logo from "./img/logo.png";
+import styles from "./css/styles.css";
+
+export default (props: { name: string }) => {
+  console.log("PR::", props);
+  return `<div class=${styles.awesome}>
+    Hello ${props.name}!
+    <img src="${logo}" />
+  </div>`;
+};

package/templates/preact/.eslintrc.json

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

package/templates/preact/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": 1,
+        "description": "The user id from the user database",
+        "example": 1,
+        "mandatory": true,
+        "type": "number"
+      }
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "jsdom": "^21.1.1",
+    "oc-server": "*",
+    "oc-template-preact-compiler": "0.2.0",
+    "preact": "^10.13.2",
+    "typescript": "5.0.2",
+    "vitest": "^0.29.7"
+  }
+}

package/templates/preact/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/dist/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/templates/preact/src/App.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'preact/hooks';
+import { useData } from 'oc-template-preact-compiler/dist/utils/useData';
+import { serverClient } from 'oc-server';
+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 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={`${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/templates/preact/src/oc-app.d.ts

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

package/templates/preact/src/server.ts

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

package/templates/preact/src/setupTests.js

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

package/templates/preact/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/templates/preact/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/templates/preact/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/templates/preact/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'
+  }
+});

package/templates/react/.eslintrc.json

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

package/templates/react/package.json

@@ -0,0 +1,44 @@
+{
+  "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-react"
+      },
+      "static": [
+        "public"
+      ]
+    },
+    "parameters": {
+      "userId": {
+        "default": 1,
+        "description": "The user id from the user database",
+        "example": 1,
+        "mandatory": true,
+        "type": "number"
+      }
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@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/templates/react/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/templates/react/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/templates/react/src/oc-app.d.ts

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

package/templates/react/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/templates/react/src/setupTests.js

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

package/templates/react/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/templates/react/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/templates/react/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/templates/react/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'
+  }
+});

package/templates/solid/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "base-component-solid",
+  "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-solid"
+      },
+      "static": [
+        "public"
+      ]
+    },
+    "parameters": {
+      "userId": {
+        "default": 1,
+        "description": "The user id from the user database",
+        "example": 1,
+        "mandatory": true,
+        "type": "number"
+      }
+    }
+  },
+  "devDependencies": {
+    "@solidjs/testing-library": "^0.7.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "jsdom": "^21.1.1",
+    "oc-server": "*",
+    "oc-template-solid-compiler": "0.4.0",
+    "solid-js": "^1.8.7",
+    "typescript": "5.0.2",
+    "vitest": "^0.29.7"
+  }
+}

package/templates/solid/src/App.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, afterEach, beforeEach, expect, vi } from 'vitest';
+import { render } from '@solidjs/testing-library';
+import { DataProvider } from 'oc-template-solid-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({}));
+    const { getByText } = render(() => (
+      <DataProvider
+        value={{
+          firstName: 'firstName',
+          lastName: 'lastName',
+          userId: 0,
+          getData,
+          getSetting
+        }}
+      >
+        <App />
+      </DataProvider>
+    ));
+
+    const extraInfoButton = getByText(/Get extra information/i);
+    expect(extraInfoButton).toBeTruthy();
+  });
+});

package/templates/solid/src/App.tsx

@@ -0,0 +1,50 @@
+import { createSignal, Show, For } from 'solid-js';
+import { useData } from 'oc-template-solid-compiler/dist/utils/useData';
+import { serverClient } from 'oc-server';
+import styles from './styles.css';
+import type { AdditionalData, ClientProps } from './types';
+
+interface AppProps extends ClientProps {
+  getMoreData?: boolean;
+}
+
+const App = () => {
+  const { firstName, lastName, userId, getSetting } = useData<AppProps>();
+  const staticPath = getSetting('staticPath');
+  const [additionalData, setAdditionalData] = createSignal<AdditionalData | null>(null);
+  const [error, setError] = createSignal('');
+
+  async function handleClick() {
+    const data = await serverClient.getMoreData({ userId });
+
+    try {
+      setAdditionalData(data);
+    } catch (error) {
+      setError(String(error));
+    }
+  }
+
+  return (
+    <Show when={!error()} fallback={<div>Something wrong happened!</div>}>
+      <div class={styles.container}>
+        <img width="50" height="50" src={`${staticPath}/public/logo.png`} alt="Logo" />
+        <h1 style={{ margin: '0 0 20px 0' }}>
+          Hello, <span style={{ 'text-decoration': 'underline' }}>{firstName}</span> {lastName}
+        </h1>
+        <Show when={!!additionalData()}>
+          <div class={styles.info}>
+            <div class={styles.block}>Age: {additionalData()!.age}</div>
+            <div class={styles.block}>
+              Hobbies: <For each={additionalData()!.hobbies}>{(hobby) => <div>{hobby}</div>}</For>
+            </div>
+          </div>
+        </Show>
+        <button class={styles.button} onClick={handleClick}>
+          Get extra information
+        </button>
+      </div>
+    </Show>
+  );
+};
+
+export default App;

package/templates/solid/src/oc-app.d.ts

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

package/templates/solid/src/server.ts

@@ -0,0 +1,36 @@
+import { Server } from 'oc-server';
+import { 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) => {
+  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/templates/solid/src/setupTests.js

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

package/templates/solid/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/templates/solid/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/templates/solid/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": "preserve",
+    "jsxImportSource": "solid-js"
+  },
+  "include": ["src"],
+  "exclude": ["src/_package"]
+}

package/templates/solid/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [solidPlugin()],
+  // @ts-ignore Missing test property
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    transformMode: { web: [/\.[jt]sx?$/] },
+    setupFiles: ['node_modules/@testing-library/jest-dom/extend-expect.js'],
+    // otherwise, solid would be loaded twice:
+    deps: { registerNodeLoader: true },
+    // if you have few tests, try commenting one
+    // or both out to improve performance:
+    threads: false,
+    isolate: false,
+  },
+});