create-oc 1.0.1 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-oc",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "type": "module",
   "description": "",
   "main": "index.js",

package/templates/elm/package.json

@@ -13,21 +13,12 @@
       "static": [
         "public"
       ]
-    },
-    "parameters": {
-      "userId": {
-        "default": 1,
-        "description": "The user id from the user database",
-        "example": 1,
-        "mandatory": true,
-        "type": "number"
-      }
     }
   },
   "dependencies": {},
   "devDependencies": {
-    "oc-server": "^2.0.1",
-    "oc-template-elm-compiler": "^1.0.1",
+    "oc-server": "^2.0.4",
+    "oc-template-elm-compiler": "^1.1.0",
     "elm": "^0.19.1-6",
     "typescript": "^5.3.3"
   }

package/templates/elm/src/server.ts

@@ -20,7 +20,16 @@ async function getFunFact(year: number) {
 }
 
 export const server = new Server()
-  .handler(async (params: { userId: number }, ctx) => {
+  .withParameters({
+    userId: {
+      default: 1,
+      description: 'The user id from the user database',
+      example: 1,
+      mandatory: true,
+      type: 'number',
+    },
+  })
+  .handler(async (params, ctx) => {
     const { userId } = params;
     const user = await getUser(userId);
     const [firstName, lastName] = user.name.split(/\s+/);

package/templates/es6/package.json

@@ -15,19 +15,10 @@
         "src": "src/view.ts",
         "type": "oc-template-es6"
       }
-    },
-    "parameters": {
-      "userId": {
-        "default": 1,
-        "description": "The user id from the user database",
-        "example": 1,
-        "mandatory": true,
-        "type": "number"
-      }
     }
   },
   "devDependencies": {
-    "oc-server": "^2.0.1",
-    "oc-template-es6-compiler": "^5.0.1"
+    "oc-server": "^2.0.4",
+    "oc-template-es6-compiler": "^5.1.0"
   }
 }

package/templates/es6/src/server.ts

@@ -20,7 +20,16 @@ async function getFunFact(year: number) {
 }
 
 export const server = new Server()
-  .handler(async (params: { userId: number }) => {
+  .withParameters({
+    userId: {
+      default: 1,
+      description: 'The user id from the user database',
+      example: 1,
+      mandatory: true,
+      type: 'number',
+    },
+  })
+  .handler(async (params) => {
     const { userId } = params;
     const user = await getUser(userId);
     const [firstName, lastName] = user.name.split(/\s+/);

package/templates/preact/package.json

@@ -18,15 +18,6 @@
       "static": [
         "public"
       ]
-    },
-    "parameters": {
-      "userId": {
-        "default": 1,
-        "description": "The user id from the user database",
-        "example": 1,
-        "mandatory": true,
-        "type": "number"
-      }
     }
   },
   "dependencies": {},
@@ -35,8 +26,8 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "jsdom": "^21.1.1",
-    "oc-server": "^2.0.1",
-    "oc-template-preact-compiler": "^1.0.1",
+    "oc-server": "^2.0.4",
+    "oc-template-preact-compiler": "^1.1.0",
     "preact": "^10.13.2",
     "typescript": "5.0.2",
     "vitest": "^0.29.7"

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

@@ -17,12 +17,24 @@ describe('App - Page', () => {
   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
+        value={{
+          firstName: 'firstName',
+          lastName: 'lastName',
+          userId: 0,
+          getData,
+        }}
+      >
+        <App
+          firstName="firstName"
+          lastName="lastName"
+          born={1991}
+          hobbies={[]}
+        />
       </DataProvider>
     );
 
-    const extraInfoButton = screen.getByText(/Get extra information/i);
+    const extraInfoButton = screen.getByText(/Fun year fact/i);
     expect(extraInfoButton).toBeTruthy();
   });
 });

package/templates/preact/src/server.ts

@@ -20,7 +20,16 @@ async function getFunFact(year: number) {
 }
 
 export const server = new Server()
-  .handler(async (params: { userId: number }) => {
+  .withParameters({
+    userId: {
+      default: 1,
+      description: 'The user id from the user database',
+      example: 1,
+      mandatory: true,
+      type: 'number',
+    },
+  })
+  .handler(async (params) => {
     const { userId } = params;
     const user = await getUser(userId);
     const [firstName, lastName] = user.name.split(/\s+/);

package/templates/react/package.json

@@ -18,15 +18,6 @@
       "static": [
         "public"
       ]
-    },
-    "parameters": {
-      "userId": {
-        "default": 1,
-        "description": "The user id from the user database",
-        "example": 1,
-        "mandatory": true,
-        "type": "number"
-      }
     }
   },
   "dependencies": {},
@@ -35,8 +26,8 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.28",
     "jsdom": "^21.1.1",
-    "oc-server": "^2.0.1",
-    "oc-template-react-compiler": "^7.0.1",
+    "oc-server": "^2.0.4",
+    "oc-template-react-compiler": "^7.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "typescript": "5.1.3",

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

@@ -26,14 +26,19 @@ describe('App - Page', () => {
           lastName: 'lastName',
           userId: 0,
           getData,
-          getSetting
+          getSetting,
         }}
       >
-        <App firstName="firstName" lastName="lastName" userId={0} />
+        <App
+          firstName="firstName"
+          lastName="lastName"
+          born={1991}
+          hobbies={[]}
+        />
       </DataProvider>
     );
 
-    const extraInfoButton = screen.getByText(/Get extra information/i);
+    const extraInfoButton = screen.getByText(/Fun year fact/i);
     expect(extraInfoButton).toBeTruthy();
   });
 });

package/templates/react/src/server.ts

@@ -20,7 +20,16 @@ async function getFunFact(year: number) {
 }
 
 export const server = new Server()
-  .handler(async (params: { userId: number }) => {
+  .withParameters({
+    userId: {
+      default: 1,
+      description: 'The user id from the user database',
+      example: 1,
+      mandatory: true,
+      type: 'number',
+    },
+  })
+  .handler(async (params) => {
     const { userId } = params;
     const user = await getUser(userId);
     const [firstName, lastName] = user.name.split(/\s+/);

package/templates/solid/package.json

@@ -18,15 +18,6 @@
       "static": [
         "public"
       ]
-    },
-    "parameters": {
-      "userId": {
-        "default": 1,
-        "description": "The user id from the user database",
-        "example": 1,
-        "mandatory": true,
-        "type": "number"
-      }
     }
   },
   "devDependencies": {
@@ -34,8 +25,8 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "jsdom": "^21.1.1",
-    "oc-server": "^2.0.1",
-    "oc-template-solid-compiler": "^1.0.1",
+    "oc-server": "^2.0.4",
+    "oc-template-solid-compiler": "^1.1.0",
     "solid-js": "^1.8.21",
     "typescript": "5.5.4",
     "vitest": "^2.0.5"

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

@@ -24,14 +24,19 @@ describe('App - Page', () => {
           lastName: 'lastName',
           userId: 0,
           getData,
-          getSetting
+          getSetting,
         }}
       >
-        <App />
+        <App
+          firstName="firstName"
+          lastName="lastName"
+          born={1991}
+          hobbies={[]}
+        />
       </DataProvider>
     ));
 
-    const extraInfoButton = getByText(/Get extra information/i);
+    const extraInfoButton = getByText(/Fun year fact/i);
     expect(extraInfoButton).toBeTruthy();
   });
 });

package/templates/solid/src/server.ts

@@ -20,7 +20,16 @@ async function getFunFact(year: number) {
 }
 
 export const server = new Server()
-  .handler(async (params: { userId: number }) => {
+  .withParameters({
+    userId: {
+      default: 1,
+      description: 'The user id from the user database',
+      example: 1,
+      mandatory: true,
+      type: 'number',
+    },
+  })
+  .handler(async (params) => {
     const { userId } = params;
     const user = await getUser(userId);
     const [firstName, lastName] = user.name.split(/\s+/);

package/templates/svelte/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "base-component-svelte",
+  "description": "",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "oc-server dev",
+    "build": "npm run check && oc package .",
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "test": "vitest"
+  },
+  "oc": {
+    "files": {
+      "data": "src/server.ts",
+      "template": {
+        "src": "src/App.svelte",
+        "type": "oc-template-svelte"
+      },
+      "static": [
+        "public"
+      ]
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "jsdom": "^21.1.1",
+    "oc-server": "^2.0.4",
+    "oc-template-svelte-compiler": "^0.0.1",
+    "svelte": "^5.23.0",
+    "typescript": "5.0.2",
+    "vitest": "^0.29.7"
+  }
+}

package/templates/svelte/src/App.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import logo from '../public/logo.png';
+  import { InitialData, serverClient } from 'oc-server';
+
+  let funFact: string | null = $state(null);
+  let { born, firstName, hobbies, lastName }: InitialData = $props();
+  let getFunFact = async () => {
+    let response = await serverClient.funFact({ year: born });
+    funFact = response.funFact;
+  };
+</script>
+
+<div class="container">
+  <img width="50" height="50" src={logo} alt="Logo" />
+
+  <h1>
+    Hello, <span>{firstName}</span>
+    {lastName}
+  </h1>
+  <div class="info">
+    <div class="block">Born: {born}</div>
+    <div class="block">
+      Hobbies: {hobbies}
+    </div>
+  </div>
+  {#if funFact}
+    <div>{funFact}</div>
+  {/if}
+  <button class="button" onclick={getFunFact}> Fun year fact </button>
+</div>
+
+<style>
+  .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;
+  }
+
+  .button:hover {
+    background-color: #c79535;
+  }
+
+  h1 {
+    margin: 0 0 20px 0;
+  }
+
+  span {
+    text-decoration: underline;
+  }
+
+  .info {
+    margin-bottom: 20px;
+  }
+
+  .block {
+    margin: 6px 0;
+  }
+</style>

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

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

package/templates/svelte/src/server.ts

@@ -0,0 +1,61 @@
+import { Server } from 'oc-server';
+
+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 userDatabase[userId];
+}
+
+async function getFunFact(year: number) {
+  return yearsFunFactDatabase[year];
+}
+
+export const server = new Server()
+  .withParameters({
+    userId: {
+      default: 1,
+      description: 'The user id from the user database',
+      example: 1,
+      mandatory: true,
+      type: 'number',
+    },
+  })
+  .handler(async (params) => {
+    const { userId } = params;
+    const user = await getUser(userId);
+    const [firstName, lastName] = user.name.split(/\s+/);
+
+    if (firstName === 'Invalid') {
+      return;
+    }
+
+    return {
+      firstName,
+      lastName,
+      born: user.born,
+      hobbies: user.hobbies,
+    };
+  })
+  .action('funFact', async (params: { year: number }) => {
+    const { year } = params;
+    const funFact = await getFunFact(year);
+
+    return {
+      funFact,
+    };
+  });
+
+declare module 'oc-server' {
+  interface Register {
+    server: typeof server;
+  }
+}

package/templates/svelte/src/setupTests.js

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

package/templates/svelte/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/svelte/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/svelte/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package/templates/svelte/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/svelte/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/svelte/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/vue/package.json

@@ -18,15 +18,6 @@
       "static": [
         "public"
       ]
-    },
-    "parameters": {
-      "userId": {
-        "default": 1,
-        "description": "The user id from the user database",
-        "example": 1,
-        "mandatory": true,
-        "type": "number"
-      }
     }
   },
   "devDependencies": {
@@ -34,8 +25,8 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-vue": "^5.0.0",
     "jsdom": "^21.1.1",
-    "oc-server": "^2.0.1",
-    "oc-template-vue-compiler": "^1.0.1",
+    "oc-server": "^2.0.4",
+    "oc-template-vue-compiler": "^1.1.0",
     "typescript": "5.0.2",
     "vitest": "^0.29.7",
     "vue": "^3.3.11",

package/templates/vue/src/server.ts

@@ -20,7 +20,16 @@ async function getFunFact(year: number) {
 }
 
 export const server = new Server()
-  .handler(async (params: { userId: number }) => {
+  .withParameters({
+    userId: {
+      default: 1,
+      description: 'The user id from the user database',
+      example: 1,
+      mandatory: true,
+      type: 'number',
+    },
+  })
+  .handler(async (params) => {
     const { userId } = params;
     const user = await getUser(userId);
     const [firstName, lastName] = user.name.split(/\s+/);