create-oc 1.1.39 → 1.1.41

package/index.js

@@ -58,7 +58,7 @@ const templates = templateChoices.map((t) => t.value);
 
 const esmVariantChoices = [
   { title: 'React', value: 'esm.react' },
-  { title: 'Remix (Experimental)', value: 'esm.remix' },
+  { title: 'Remix', value: 'esm.remix' },
 ];
 const esmVariants = esmVariantChoices.map((t) => t.value);
 

package/package.json

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

package/templates/esm.remix/package.json

@@ -22,7 +22,7 @@
     }
   },
   "devDependencies": {
-    "@remix-run/component": "^0.5.0",
+    "@remix-run/ui": "^0.4.0",
     "happy-dom": "^18.0.1",
     "oc-server": "^4.0.2",
     "oc-template-esm-compiler": "^4.0.3",

package/templates/esm.remix/src/App.tsx

@@ -3,7 +3,7 @@ import {
   type ActionOutput,
   getInitialData,
 } from 'oc-server/client';
-import { type Handle } from '@remix-run/component';
+import { on, type Handle } from '@remix-run/ui';
 import styles from './styles.module.css';
 import logo from '../public/logo.png';
 
@@ -26,32 +26,32 @@ export default function App(handle: Handle) {
     }
   };
 
-  if (error) {
-    return <div>Something wrong happened!</div>;
-  }
+  return () => {
+    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>
-      <div className={styles.info}>
-        <div className={styles.block}>Born: {born}</div>
-        <div className={styles.block}>
-          Hobbies: {hobbies.map((x) => x.toLowerCase()).join(', ')}
+    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>
+        <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}
+          mix={[on<HTMLButtonElement>('click', getFunFact)]}
+        >
+          Fun year fact
+        </button>
       </div>
-      {additionalData && <div>{additionalData.funFact}</div>}
-      <button
-        className={styles.button}
-        on={{
-          click: getFunFact,
-        }}
-      >
-        Fun year fact
-      </button>
-    </div>
-  );
+    );
+  };
 }

package/templates/esm.remix/src/entry.client.tsx

@@ -1,5 +1,5 @@
 import { createComponent } from 'oc-template-esm-compiler/renderer';
-import { createRoot } from '@remix-run/component';
+import { createRoot } from '@remix-run/ui';
 import App from './App';
 
 export default createComponent(() => {

package/templates/esm.remix/tsconfig.json

@@ -16,8 +16,9 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "types": [],
     "jsx": "react-jsx",
-    "jsxImportSource": "@remix-run/component"
+    "jsxImportSource": "@remix-run/ui"
   },
   "include": ["src"],
   "exclude": ["src/_package"]

package/templates/esm.remix/vite.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   plugins: [oc()],
   build: {
     rollupOptions: {
-      external: ['@remix-run/component'],
+      external: ['@remix-run/ui'],
     },
   },
 });