oc-template-solid-compiler 0.6.4 → 0.7.1

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "oc-template-solid-compiler",
-  "version": "0.6.4",
+  "version": "0.7.1",
   "description": "Compiler for the SolidJS OC template",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc && tsc --project tsconfig.solid.json",
-    "prepare": "npm run build",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "repository": {
@@ -30,7 +29,7 @@
   "license": "MIT",
   "dependencies": {
     "oc-template-solid": "^0.1.1",
-    "oc-vite-compiler": "^3.4.0",
+    "oc-vite-compiler": "^3.5.2",
     "solid-js": "^1.8.7",
     "vite-plugin-solid": "^2.8.0"
   },

package/scaffold/src/package.json

@@ -33,8 +33,8 @@
     "@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": "*",
+    "oc-server": "^0.3.0",
+    "oc-template-solid-compiler": "^0.7.0",
     "solid-js": "^1.8.7",
     "typescript": "5.0.2",
     "vitest": "^0.29.7"

package/scaffold/src/src/App.tsx

@@ -1,21 +1,18 @@
 import { createSignal, Show, For } from 'solid-js';
-import { useData } from 'oc-template-solid-compiler/dist/utils/useData';
-import { serverClient } from 'oc-server';
+import { serverClient, InitialData, ActionOutput } from 'oc-server';
 import styles from './styles.css';
-import type { AdditionalData, ClientProps } from './types';
+import logo from '../public/logo.png';
 
-interface AppProps extends ClientProps {
-  getMoreData?: boolean;
-}
+type AdditionalData = ActionOutput<'funFact'>;
 
-const App = () => {
-  const { firstName, lastName, userId, getSetting } = useData<AppProps>();
-  const staticPath = getSetting('staticPath');
-  const [additionalData, setAdditionalData] = createSignal<AdditionalData | null>(null);
+const App = (props: InitialData) => {
+  const { firstName, lastName, born, hobbies } = props;
+  const [additionalData, setAdditionalData] =
+    createSignal<AdditionalData | null>(null);
   const [error, setError] = createSignal('');
 
   async function handleClick() {
-    const data = await serverClient.getMoreData({ userId });
+    const data = await serverClient.funFact({ year: born });
 
     try {
       setAdditionalData(data);
@@ -27,20 +24,23 @@ const App = () => {
   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" />
+        <img width="50" height="50" src={logo} alt="Logo" />
         <h1 style={{ margin: '0 0 20px 0' }}>
-          Hello, <span style={{ 'text-decoration': 'underline' }}>{firstName}</span> {lastName}
+          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 class={styles.info}>
+          <div class={styles.block}>Born: {born}</div>
+          <div class={styles.block}>
+            Hobbies: {hobbies.map((x) => x.toLowerCase()).join(', ')}
           </div>
+        </div>
+        <Show when={additionalData()}>
+          <div>{additionalData()!.funFact}</div>
         </Show>
         <button class={styles.button} onClick={handleClick}>
-          Get extra information
+          Fun year fact
         </button>
       </div>
     </Show>

package/scaffold/src/src/server.ts

@@ -1,31 +1,45 @@
 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'] }
+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) => {
-  const { userId } = params;
-  const user = await getUser(userId);
+}).action('funFact', async (params: { year: number }) => {
+  const { year } = params;
+  const funFact = await getFunFact(year);
+
   return {
-    age: user.age,
-    hobbies: user.hobbies
+    funFact,
   };
 });