create-oc 1.1.11 → 1.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +1 -0
- package/package.json +1 -1
- package/templates/elm/package.json +1 -1
- package/templates/es6/package.json +1 -1
- package/templates/esm/.eslintrc.json +3 -0
- package/templates/esm/package.json +38 -0
- package/templates/esm/public/logo.png +0 -0
- package/templates/esm/src/App.test.tsx +44 -0
- package/templates/esm/src/App.tsx +50 -0
- package/templates/esm/src/entry.client.tsx +15 -0
- package/templates/esm/src/entry.server.ts +61 -0
- package/templates/esm/src/oc-app.d.ts +1 -0
- package/templates/esm/src/setupTests.js +1 -0
- package/templates/esm/src/styles.css +30 -0
- package/templates/esm/tsconfig.json +23 -0
- package/templates/esm/vite.config.ts +24 -0
- package/templates/preact/package.json +1 -1
- package/templates/react/package.json +1 -1
- package/templates/solid/package.json +1 -1
- package/templates/svelte/package.json +1 -1
- package/templates/vue/package.json +1 -1
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "base-component-esm",
|
|
3
|
+
"description": "",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"lint": "eslint --max-warnings 0 --ext .js,.jsx,.ts,.tsx src",
|
|
8
|
+
"dev": "oc-server dev",
|
|
9
|
+
"build": "tsc --noEmit && oc package .",
|
|
10
|
+
"test": "vitest"
|
|
11
|
+
},
|
|
12
|
+
"oc": {
|
|
13
|
+
"files": {
|
|
14
|
+
"data": "src/entry.server.ts",
|
|
15
|
+
"template": {
|
|
16
|
+
"src": "src/entry.client.tsx",
|
|
17
|
+
"type": "oc-template-esm"
|
|
18
|
+
},
|
|
19
|
+
"static": [
|
|
20
|
+
"public"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@testing-library/react": "^16.3.0",
|
|
26
|
+
"@testing-library/user-event": "^14.6.1",
|
|
27
|
+
"@types/react": "^19.1.8",
|
|
28
|
+
"@types/react-dom": "^19.1.6",
|
|
29
|
+
"@vitejs/plugin-react": "^4.6.0",
|
|
30
|
+
"happy-dom": "^18.0.1",
|
|
31
|
+
"oc-server": "^2.1.0",
|
|
32
|
+
"oc-template-esm-compiler": "^0.0.2",
|
|
33
|
+
"react": "19.1.0",
|
|
34
|
+
"react-dom": "19.1.0",
|
|
35
|
+
"typescript": "5.8.3",
|
|
36
|
+
"vitest": "^3.2.4"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { describe, it, afterEach, beforeEach, expect, vi } from 'vitest';
|
|
3
|
+
import { render, screen } from '@testing-library/react';
|
|
4
|
+
import { DataProvider } from 'oc-template-react-compiler/dist/utils/useData';
|
|
5
|
+
|
|
6
|
+
import App from './App';
|
|
7
|
+
|
|
8
|
+
const getData = vi.fn();
|
|
9
|
+
const getSetting = vi.fn();
|
|
10
|
+
|
|
11
|
+
describe('App - Page', () => {
|
|
12
|
+
beforeEach(() => {
|
|
13
|
+
window.oc = { events: { on: vi.fn(), fire: vi.fn() } } as any;
|
|
14
|
+
});
|
|
15
|
+
afterEach(() => {
|
|
16
|
+
vi.restoreAllMocks();
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it('Gets more data when clicking the button', () => {
|
|
20
|
+
getData.mockImplementationOnce(() => Promise.resolve({}));
|
|
21
|
+
getSetting.mockImplementationOnce(() => ({}));
|
|
22
|
+
render(
|
|
23
|
+
<DataProvider
|
|
24
|
+
value={{
|
|
25
|
+
firstName: 'firstName',
|
|
26
|
+
lastName: 'lastName',
|
|
27
|
+
userId: 0,
|
|
28
|
+
getData,
|
|
29
|
+
getSetting,
|
|
30
|
+
}}
|
|
31
|
+
>
|
|
32
|
+
<App
|
|
33
|
+
firstName="firstName"
|
|
34
|
+
lastName="lastName"
|
|
35
|
+
born={1991}
|
|
36
|
+
hobbies={[]}
|
|
37
|
+
/>
|
|
38
|
+
</DataProvider>
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
const extraInfoButton = screen.getByText(/Fun year fact/i);
|
|
42
|
+
expect(extraInfoButton).toBeTruthy();
|
|
43
|
+
});
|
|
44
|
+
});
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { serverClient, InitialData, ActionOutput } from 'oc-server';
|
|
3
|
+
import styles from './styles.css';
|
|
4
|
+
import logo from '../public/logo.png';
|
|
5
|
+
|
|
6
|
+
type AdditionalData = ActionOutput<'funFact'>;
|
|
7
|
+
|
|
8
|
+
const App: React.FC<InitialData> = (props: InitialData) => {
|
|
9
|
+
const { firstName, lastName, born, hobbies } = props;
|
|
10
|
+
const [additionalData, setAdditionalData] = useState<AdditionalData | null>(
|
|
11
|
+
null
|
|
12
|
+
);
|
|
13
|
+
const [error, setError] = useState('');
|
|
14
|
+
|
|
15
|
+
const getFunFact = async () => {
|
|
16
|
+
setError('');
|
|
17
|
+
try {
|
|
18
|
+
const data = await serverClient.funFact({ year: born });
|
|
19
|
+
setAdditionalData(data);
|
|
20
|
+
} catch (err) {
|
|
21
|
+
setError(String(err));
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
if (error) {
|
|
26
|
+
return <div>Something wrong happened!</div>;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<div className={styles.container}>
|
|
31
|
+
<img width="50" height="50" src={logo} alt="Logo" />
|
|
32
|
+
<h1 style={{ margin: '0 0 20px 0' }}>
|
|
33
|
+
Hello, <span style={{ textDecoration: 'underline' }}>{firstName}</span>{' '}
|
|
34
|
+
{lastName}
|
|
35
|
+
</h1>
|
|
36
|
+
<div className={styles.info}>
|
|
37
|
+
<div className={styles.block}>Born: {born}</div>
|
|
38
|
+
<div className={styles.block}>
|
|
39
|
+
Hobbies: {hobbies.map((x) => x.toLowerCase()).join(', ')}
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
{additionalData && <div>{additionalData.funFact}</div>}
|
|
43
|
+
<button className={styles.button} onClick={getFunFact}>
|
|
44
|
+
Fun year fact
|
|
45
|
+
</button>
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export default App;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { createComponent } from "oc-template-esm-compiler/renderer";
|
|
2
|
+
import { createRoot, Root } from "react-dom/client";
|
|
3
|
+
import App from "./App";
|
|
4
|
+
|
|
5
|
+
let root: Root | undefined = undefined;
|
|
6
|
+
|
|
7
|
+
export default createComponent({
|
|
8
|
+
mount(element, props) {
|
|
9
|
+
root = createRoot(element);
|
|
10
|
+
root.render(<App {...props} />);
|
|
11
|
+
},
|
|
12
|
+
unmount() {
|
|
13
|
+
root?.unmount();
|
|
14
|
+
},
|
|
15
|
+
});
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { Server } from 'oc-server';
|
|
2
|
+
|
|
3
|
+
const userDatabase = [
|
|
4
|
+
{ name: 'John Doe', born: 1986, hobbies: ['Swimming', 'Basketball'] },
|
|
5
|
+
{ name: 'Jane Doe', born: 1991, hobbies: ['Running', 'Rugby'] },
|
|
6
|
+
];
|
|
7
|
+
|
|
8
|
+
const yearsFunFactDatabase: Record<number, string> = {
|
|
9
|
+
1986: "Halley's Comet made its closest approach to Earth in 1986, visible to the naked eye.",
|
|
10
|
+
1987: 'The first Final Fantasy game was released in 1987.',
|
|
11
|
+
1991: 'The first web page was created in 1991 by Tim Berners-Lee.',
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
async function getUser(userId: number) {
|
|
15
|
+
return userDatabase[userId];
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
async function getFunFact(year: number) {
|
|
19
|
+
return yearsFunFactDatabase[year];
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export const server = new Server()
|
|
23
|
+
.withParameters({
|
|
24
|
+
userId: {
|
|
25
|
+
default: 1,
|
|
26
|
+
description: 'The user id from the user database',
|
|
27
|
+
example: 1,
|
|
28
|
+
mandatory: true,
|
|
29
|
+
type: 'number',
|
|
30
|
+
},
|
|
31
|
+
})
|
|
32
|
+
.handler(async (params) => {
|
|
33
|
+
const { userId } = params;
|
|
34
|
+
const user = await getUser(userId);
|
|
35
|
+
const [firstName, lastName] = user.name.split(/\s+/);
|
|
36
|
+
|
|
37
|
+
if (firstName === 'Invalid') {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
return {
|
|
42
|
+
firstName,
|
|
43
|
+
lastName,
|
|
44
|
+
born: user.born,
|
|
45
|
+
hobbies: user.hobbies,
|
|
46
|
+
};
|
|
47
|
+
})
|
|
48
|
+
.action('funFact', async (params: { year: number }) => {
|
|
49
|
+
const { year } = params;
|
|
50
|
+
const funFact = await getFunFact(year);
|
|
51
|
+
|
|
52
|
+
return {
|
|
53
|
+
funFact,
|
|
54
|
+
};
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
declare module 'oc-server' {
|
|
58
|
+
interface Register {
|
|
59
|
+
server: typeof server;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="oc-vite/client" />
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
background-color: #3b246c;
|
|
3
|
+
color: #fff;
|
|
4
|
+
font-family: sans-serif;
|
|
5
|
+
padding: 40px;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.button {
|
|
9
|
+
background-color: #a97613;
|
|
10
|
+
border: none;
|
|
11
|
+
padding: 15px 32px;
|
|
12
|
+
text-align: center;
|
|
13
|
+
font-size: 16px;
|
|
14
|
+
text-decoration: none;
|
|
15
|
+
display: inline-block;
|
|
16
|
+
color: inherit;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.info {
|
|
21
|
+
margin-bottom: 20px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.block {
|
|
25
|
+
margin: 6px 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.button:hover {
|
|
29
|
+
background-color: #c79535;
|
|
30
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "esnext",
|
|
4
|
+
"lib": ["dom", "dom.iterable", "esnext"],
|
|
5
|
+
"strict": true,
|
|
6
|
+
"allowJs": true,
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"esModuleInterop": true,
|
|
9
|
+
"allowSyntheticDefaultImports": true,
|
|
10
|
+
"forceConsistentCasingInFileNames": true,
|
|
11
|
+
"noFallthroughCasesInSwitch": true,
|
|
12
|
+
|
|
13
|
+
// These values are required and cannot be changed by the user
|
|
14
|
+
// Keep this in sync with the rollup config
|
|
15
|
+
"module": "ESNext",
|
|
16
|
+
"moduleResolution": "bundler",
|
|
17
|
+
"resolveJsonModule": true,
|
|
18
|
+
"isolatedModules": true,
|
|
19
|
+
"jsx": "react-jsx"
|
|
20
|
+
},
|
|
21
|
+
"include": ["src"],
|
|
22
|
+
"exclude": ["src/_package"]
|
|
23
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { defineConfig } from "vite";
|
|
2
|
+
import react from "@vitejs/plugin-react";
|
|
3
|
+
|
|
4
|
+
// https://vitejs.dev/config/
|
|
5
|
+
export default defineConfig({
|
|
6
|
+
// Add your own plugins here for thinkgs like eslint or typecheckers
|
|
7
|
+
plugins: [react()],
|
|
8
|
+
resolve: {
|
|
9
|
+
alias: {
|
|
10
|
+
react: "https://esm.sh/react@19.1.0",
|
|
11
|
+
"react-dom": "https://esm.sh/react-dom@19.1.0",
|
|
12
|
+
"react-dom/": "https://esm.sh/react-dom@19.1.0/",
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
build: {
|
|
16
|
+
rollupOptions: {
|
|
17
|
+
external: ["react", "react-dom"],
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
// @ts-ignore Missing test property
|
|
21
|
+
test: {
|
|
22
|
+
environment: 'jsdom'
|
|
23
|
+
}
|
|
24
|
+
});
|