oc-template-svelte-compiler 3.0.0 → 3.0.2

package/dist/lib/svelteOCProviderTemplate.js

@@ -18,13 +18,13 @@ function svelteOCProviderTemplate({ viewPath, providerFunctions }) {
       target: element,
       props: rest
     });
-  }
 
-  element.parentElement.unmount = () => {
-    if (app) {
-      unmount(app);
-      app = null;
-    }
+    element.parentElement.unmount = () => {
+      if (app) {
+        unmount(app);
+        app = null;
+      }
+    };
   }
 
   renderer.component = View;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oc-template-svelte-compiler",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Compiler for the Svelte OC template",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -28,9 +28,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "oc-template-svelte": "^0.0.2",
-    "oc-vite-compiler": "^6.0.0",
+    "oc-vite-compiler": "^6.0.2",
     "svelte": "^5.23.0"
   },
   "files": [

package/scaffold/src/.cursor/rules/oc-project.mdc

@@ -56,7 +56,7 @@ OpenComponents is a microfrontend technology that resembles a Vite project but w
 
 ### Parameters vs Actions
 
-- **Parameters**: Initial props passed via URL query string (like `?userId=1`)
+- **Parameters**: Initial props passed via URL query string (like `?name=Ada&year=1986`)
 - **Actions**: Server endpoints that the client can call after initial render
 
 ### Streaming Mode Benefits

package/scaffold/src/package.json

@@ -23,17 +23,16 @@
     }
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@testing-library/jest-dom": "^7.0.1",
     "@tsconfig/svelte": "^5.0.4",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "jsdom": "^21.1.1",
-    "oc-server": "^4.0.0",
-    "oc-template-svelte-compiler": "^3.0.0",
-    "svelte": "^5.23.0",
+    "jsdom": "^30.1.2",
+    "oc-server": "^4.0.3",
+    "oc-template-svelte-compiler": "^3.0.2",
+    "svelte": "^5.57.2",
     "svelte-check": "^4.0.0",
-    "typescript": "5.0.2",
+    "typescript": "5.9.3",
     "vite": "^7.1.12",
-    "vitest": "^0.29.7"
+    "vitest": "^5.0.3"
   }
 }

package/scaffold/src/src/App.svelte

@@ -2,70 +2,153 @@
   import logo from '../public/logo.png';
   import { type InitialData, serverClient } from 'oc-server/client';
 
-  let funFact: string | null = $state(null);
-  let { born, firstName, hobbies, lastName }: InitialData = $props();
+  let { name, year }: InitialData = $props();
+  let fact: string | null = $state(null);
+  let loading = $state(false);
+  let error = $state('');
   let getFunFact = async () => {
-    let response = await serverClient.funFact({ year: born });
-    funFact = response.funFact;
+    loading = true;
+    error = '';
+    try {
+      let response = await serverClient.funFact({ year });
+      fact = response.funFact;
+    } catch (err) {
+      error = String(err);
+    } finally {
+      loading = false;
+    }
   };
 </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 class="card">
+    <div class="brand">
+      <img class="logo" width="40" height="40" src={logo} alt="Logo" />
+      <p class="eyebrow">OpenComponents · Vite</p>
     </div>
+    <h1 class="title">Hello, <span class="name">{name}</span></h1>
+    <p class="subtitle">Born in <span class="pill">{year}</span></p>
+    {#if fact}
+      <div class="fact">{fact}</div>
+    {/if}
+    {#if error}
+      <div class="error">{error}</div>
+    {/if}
+    <button class="button" onclick={getFunFact} disabled={loading}>
+      {loading ? 'Loading…' : 'Fun year fact'}
+    </button>
   </div>
-  {#if funFact}
-    <div>{funFact}</div>
-  {/if}
-  <button class="button" onclick={getFunFact}> Fun year fact </button>
 </div>
 
 <style>
   .container {
-    background-color: #3b246c;
+    background-color: #0f172a;
     color: #fff;
-    font-family: sans-serif;
-    padding: 40px;
+    font-family: 'DejaVu Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
+      sans-serif;
+    padding: 56px 24px;
   }
 
-  .button {
-    background-color: #a97613;
-    border: none;
-    padding: 15px 32px;
-    text-align: center;
+  .card {
+    background-color: #ffffff;
+    color: #0f172a;
+    border-radius: 20px;
+    padding: 32px;
+    max-width: 440px;
+    margin: 0 auto;
+    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.45);
+  }
+
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  .logo {
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    display: block;
+  }
+
+  .eyebrow {
+    margin: 0;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #4f46e5;
+  }
+
+  .title {
+    margin: 0 0 8px 0;
+    font-size: 30px;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+  }
+
+  .name {
+    color: #4f46e5;
+  }
+
+  .subtitle {
+    margin: 0 0 4px 0;
     font-size: 16px;
-    text-decoration: none;
+    color: #475569;
+  }
+
+  .pill {
     display: inline-block;
-    color: inherit;
-    cursor: pointer;
+    background-color: #eef2ff;
+    color: #4338ca;
+    border-radius: 999px;
+    padding: 2px 12px;
+    font-weight: 700;
   }
 
-  .button:hover {
-    background-color: #c79535;
+  .button {
+    margin-top: 20px;
+    width: 100%;
+    background-color: #4f46e5;
+    color: #fff;
+    border: none;
+    border-radius: 12px;
+    padding: 12px 24px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
   }
 
-  h1 {
-    margin: 0 0 20px 0;
+  .button:hover {
+    background-color: #4338ca;
   }
 
-  span {
-    text-decoration: underline;
+  .button:disabled {
+    opacity: 0.6;
+    cursor: default;
   }
 
-  .info {
-    margin-bottom: 20px;
+  .fact {
+    margin-top: 20px;
+    background-color: #eef2ff;
+    border-left: 4px solid #4f46e5;
+    border-radius: 0 12px 12px 0;
+    padding: 14px 16px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: #1e1b4b;
   }
 
-  .block {
-    margin: 6px 0;
+  .error {
+    margin-top: 20px;
+    background-color: #fef2f2;
+    border-left: 4px solid #ef4444;
+    border-radius: 0 12px 12px 0;
+    padding: 14px 16px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: #991b1b;
   }
 </style>

package/scaffold/src/src/App.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'svelte/server';
+
+import App from './App.svelte';
+
+describe('App - Page', () => {
+  it('renders the fun fact button', () => {
+    const { body } = render(App, {
+      props: {
+        name: 'firstName',
+        year: 1991,
+      },
+    });
+
+    expect(body).toMatch(/Fun year fact/i);
+  });
+});

package/scaffold/src/src/server.ts

@@ -1,82 +1,47 @@
 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.',
+// Small lookup for the action below. Kept tiny on purpose: it only shows
+// that an action receives input and returns data.
+const funFacts: Record<number, string> = {
+  1986: "Halley's Comet made its closest approach to Earth in 1986.",
   1991: 'The first web page was created in 1991 by Tim Berners-Lee.',
 };
 
-async function getUser(userId: number) {
-  if (userId < 0 || userId >= userDatabase.length) {
-    throw new Error(`User with ID ${userId} not found`);
-  }
-  return userDatabase[userId];
-}
-
-async function getFunFact(year: number) {
-  return yearsFunFactDatabase[year] || `No fun fact available for year ${year}`;
-}
-
-// Export the server instance - this is required for OC
+// Tip: `new Server({ stream: true })` lets handlers and actions return
+// Promises that resolve on the client instead of blocking the render.
 export const server = new Server({
   development: {
-    // Enable console logs from browser to server for debugging
+    // Stream browser console logs to the terminal during `npm start`
     console: true,
   },
 })
-  //Define URL parameters that can be passed to your component
+  // Parameters become URL query strings, e.g. `?name=Ada&year=1986`
   .withParameters({
-    userId: {
-      default: 1,
-      description: 'The user id from the user database',
-      example: 1,
-      mandatory: true,
+    name: {
+      default: 'Jane Doe',
+      description: 'Who to greet',
+      example: 'Jane Doe',
+      type: 'string',
+    },
+    year: {
+      default: 1991,
+      description: 'Birth year used for the fun fact',
+      example: 1991,
       type: 'number',
     },
   })
-  // Main handler - returns initial data for component rendering
-  // This runs when the component is first loaded
-  .handler(async (params, ctx) => {
-    const { userId } = params;
-    const user = await getUser(userId);
-    const [firstName, lastName] = user.name.split(/\s+/);
-
-    if (firstName === 'Invalid') {
-      // Return undefined to prevent rendering
-      return;
-    }
-
-    // Set cache headers when same params produce same result
-    // This improves performance by reducing server load
-    // Don't cache in local environment because we might get render mismatches
-    if (ctx.env.name !== 'local') {
-      ctx.setHeader('Cache-Control', 'max-age=300'); // Cache for 5 minutes
-    }
-
-    // Return data that will be passed as props to React component
-    return {
-      firstName,
-      lastName,
-      born: user.born,
-      hobbies: user.hobbies,
-    };
+  // Runs once per render. Its return value becomes the UI props.
+  .handler(async ({ name = 'Jane Doe', year = 1991 }) => {
+    return { name: name.trim() || 'Jane Doe', year };
   })
-  // Actions are server endpoints that the client can call
-  // Use these for user interactions, form submissions, etc.
-  .action('funFact', async (params: { year: number }) => {
-    const { year } = params;
-    const funFact = await getFunFact(year);
+  // Runs on demand from the browser via `serverClient.funFact({ year })`
+  .action('funFact', async ({ year }: { year: number }) => {
     return {
-      funFact,
+      funFact: funFacts[year] ?? `No fun fact available for year ${year}`,
     };
   });
 
-// This enables automatic type inference between server and client
+// Enables type-safe props and actions on the client
 declare module 'oc-server' {
   interface Register {
     server: typeof server;

package/scaffold/src/src/styles.css

@@ -1,30 +1,110 @@
 .container {
-  background-color: #3b246c;
+  background-color: #0f172a;
   color: #fff;
-  font-family: sans-serif;
-  padding: 40px;
+  font-family: 'DejaVu Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
+    sans-serif;
+  padding: 56px 24px;
 }
 
-.button {
-  background-color: #a97613;
-  border: none;
-  padding: 15px 32px;
-  text-align: center;
+.card {
+  background-color: #ffffff;
+  color: #0f172a;
+  border-radius: 20px;
+  padding: 32px;
+  max-width: 440px;
+  margin: 0 auto;
+  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.45);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.logo {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: block;
+}
+
+.eyebrow {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: #4f46e5;
+}
+
+.title {
+  margin: 0 0 8px 0;
+  font-size: 30px;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+
+.name {
+  color: #4f46e5;
+}
+
+.subtitle {
+  margin: 0 0 4px 0;
   font-size: 16px;
-  text-decoration: none;
+  color: #475569;
+}
+
+.pill {
   display: inline-block;
-  color: inherit;
+  background-color: #eef2ff;
+  color: #4338ca;
+  border-radius: 999px;
+  padding: 2px 12px;
+  font-weight: 700;
+}
+
+.button {
+  margin-top: 20px;
+  width: 100%;
+  background-color: #4f46e5;
+  color: #fff;
+  border: none;
+  border-radius: 12px;
+  padding: 12px 24px;
+  font-size: 15px;
+  font-weight: 600;
   cursor: pointer;
 }
 
-.info {
-  margin-bottom: 20px;
+.button:hover {
+  background-color: #4338ca;
 }
 
-.block {
-  margin: 6px 0;
+.button:disabled {
+  opacity: 0.6;
+  cursor: default;
 }
 
-.button:hover {
-  background-color: #c79535;
+.fact {
+  margin-top: 20px;
+  background-color: #eef2ff;
+  border-left: 4px solid #4f46e5;
+  border-radius: 0 12px 12px 0;
+  padding: 14px 16px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: #1e1b4b;
+}
+
+.error {
+  margin-top: 20px;
+  background-color: #fef2f2;
+  border-left: 4px solid #ef4444;
+  border-radius: 0 12px 12px 0;
+  padding: 14px 16px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: #991b1b;
 }

package/scaffold/src/vite.config.ts

@@ -2,10 +2,9 @@ import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  // Add your own plugins here for thinkgs like eslint or typecheckers
+  // Add your own plugins here for things like eslint or typecheckers
+  // NOTE: do not add plugins here. oc loads this file into the component
+  // packaging build, where template plugins break compilation. Test-only
+  // config (including the svelte plugin) lives in vitest.config.ts instead.
   plugins: [],
-  // @ts-ignore Missing test property
-  test: {
-    environment: 'jsdom'
-  }
 });

package/scaffold/src/vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// Vitest-only config. The packaging build reads vite.config.ts (which must
+// stay plugin-free), so .svelte support for unit tests lives here. Tests
+// render on the server (no DOM needed), which also makes the plugin emit
+// server output for components.
+export default defineConfig({
+  plugins: [svelte()],
+  test: {
+    environment: 'node',
+  },
+});

package/scaffold/src/src/types.ts

@@ -1,15 +0,0 @@
-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;
-}