@vertesia/create-plugin 0.59.0 → 0.60.0
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/package.json +2 -2
- package/templates/web/README.md +54 -0
- package/templates/web/eslint.config.js +28 -0
- package/templates/web/index.html.tmpl +26 -0
- package/templates/web/src/index.css +1 -0
- package/templates/web/src/index.tsx.tmpl +18 -0
- package/templates/web/src/main.tsx.tmpl +10 -0
- package/templates/web/src/pages.tsx +31 -0
- package/templates/web/src/routes.tsx +17 -0
- package/templates/web/src/vite-env.d.ts +1 -0
- package/templates/web/tsconfig.app.json +27 -0
- package/templates/web/tsconfig.json +7 -0
- package/templates/web/tsconfig.node.json +25 -0
- package/templates/web/vite.config.ts +47 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vertesia/create-plugin",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.60.0",
|
|
4
4
|
"description": "Initialize a Vertesia plugin package",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"types": "./lib/main.d.ts",
|
|
11
11
|
"files": [
|
|
12
12
|
"lib",
|
|
13
|
-
"
|
|
13
|
+
"templates",
|
|
14
14
|
"bin"
|
|
15
15
|
],
|
|
16
16
|
"license": "Apache-2.0",
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# React + TypeScript + Vite
|
|
2
|
+
|
|
3
|
+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
4
|
+
|
|
5
|
+
Currently, two official plugins are available:
|
|
6
|
+
|
|
7
|
+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
8
|
+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
9
|
+
|
|
10
|
+
## Expanding the ESLint configuration
|
|
11
|
+
|
|
12
|
+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
|
13
|
+
|
|
14
|
+
```js
|
|
15
|
+
export default tseslint.config({
|
|
16
|
+
extends: [
|
|
17
|
+
// Remove ...tseslint.configs.recommended and replace with this
|
|
18
|
+
...tseslint.configs.recommendedTypeChecked,
|
|
19
|
+
// Alternatively, use this for stricter rules
|
|
20
|
+
...tseslint.configs.strictTypeChecked,
|
|
21
|
+
// Optionally, add this for stylistic rules
|
|
22
|
+
...tseslint.configs.stylisticTypeChecked,
|
|
23
|
+
],
|
|
24
|
+
languageOptions: {
|
|
25
|
+
// other options...
|
|
26
|
+
parserOptions: {
|
|
27
|
+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
28
|
+
tsconfigRootDir: import.meta.dirname,
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
})
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
// eslint.config.js
|
|
38
|
+
import reactX from 'eslint-plugin-react-x'
|
|
39
|
+
import reactDom from 'eslint-plugin-react-dom'
|
|
40
|
+
|
|
41
|
+
export default tseslint.config({
|
|
42
|
+
plugins: {
|
|
43
|
+
// Add the react-x and react-dom plugins
|
|
44
|
+
'react-x': reactX,
|
|
45
|
+
'react-dom': reactDom,
|
|
46
|
+
},
|
|
47
|
+
rules: {
|
|
48
|
+
// other rules...
|
|
49
|
+
// Enable its recommended typescript rules
|
|
50
|
+
...reactX.configs['recommended-typescript'].rules,
|
|
51
|
+
...reactDom.configs.recommended.rules,
|
|
52
|
+
},
|
|
53
|
+
})
|
|
54
|
+
```
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import js from '@eslint/js'
|
|
2
|
+
import globals from 'globals'
|
|
3
|
+
import reactHooks from 'eslint-plugin-react-hooks'
|
|
4
|
+
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
5
|
+
import tseslint from 'typescript-eslint'
|
|
6
|
+
|
|
7
|
+
export default tseslint.config(
|
|
8
|
+
{ ignores: ['dist'] },
|
|
9
|
+
{
|
|
10
|
+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
|
11
|
+
files: ['**/*.{ts,tsx}'],
|
|
12
|
+
languageOptions: {
|
|
13
|
+
ecmaVersion: 2020,
|
|
14
|
+
globals: globals.browser,
|
|
15
|
+
},
|
|
16
|
+
plugins: {
|
|
17
|
+
'react-hooks': reactHooks,
|
|
18
|
+
'react-refresh': reactRefresh,
|
|
19
|
+
},
|
|
20
|
+
rules: {
|
|
21
|
+
...reactHooks.configs.recommended.rules,
|
|
22
|
+
'react-refresh/only-export-components': [
|
|
23
|
+
'warn',
|
|
24
|
+
{ allowConstantExport: true },
|
|
25
|
+
],
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
)
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<title>${plugin_title}</title>
|
|
9
|
+
<script type="importmap">
|
|
10
|
+
{
|
|
11
|
+
"imports": {
|
|
12
|
+
"react": "https://esm.sh/react@19.0.0",
|
|
13
|
+
"react-dom": "https://esm.sh/react-dom@19.0.0",
|
|
14
|
+
"react-dom/client": "https://esm.sh/react-dom@19.0.0/client",
|
|
15
|
+
"react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime",
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
</script>
|
|
19
|
+
</head>
|
|
20
|
+
|
|
21
|
+
<body>
|
|
22
|
+
<div id="root"></div>
|
|
23
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
24
|
+
</body>
|
|
25
|
+
|
|
26
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { NestedRouterProvider } from "@vertesia/ui/router";
|
|
2
|
+
import { routes } from "./routes";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Export the plugin component.
|
|
6
|
+
*/
|
|
7
|
+
export default function ${ PluginComponent } ({ slot }: { slot: string }) {
|
|
8
|
+
if (slot === "page") {
|
|
9
|
+
return (
|
|
10
|
+
<NestedRouterProvider
|
|
11
|
+
routes={routes}
|
|
12
|
+
index="/home" />
|
|
13
|
+
);
|
|
14
|
+
} else {
|
|
15
|
+
console.warn('No component found for slot', slot);
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { StrictMode } from 'react'
|
|
2
|
+
import { createRoot } from 'react-dom/client'
|
|
3
|
+
import ${ PluginComponent } from './index.tsx'
|
|
4
|
+
import './index.css'
|
|
5
|
+
|
|
6
|
+
createRoot(document.getElementById('root')!).render(
|
|
7
|
+
<StrictMode>
|
|
8
|
+
<${PluginComponent} slot="page" />
|
|
9
|
+
</StrictMode>,
|
|
10
|
+
)
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { useNavigate } from "@vertesia/ui/router";
|
|
2
|
+
import { useUserSession } from "@vertesia/ui/session";
|
|
3
|
+
import type { ReactNode } from "react";
|
|
4
|
+
|
|
5
|
+
export function HomePage() {
|
|
6
|
+
const { user } = useUserSession();
|
|
7
|
+
return (
|
|
8
|
+
<div className='p-4'>
|
|
9
|
+
<h1 className='pb-4'>Hello {user?.email}!</h1>
|
|
10
|
+
<NavButton href='/next'>Go to next page</NavButton>
|
|
11
|
+
</div>
|
|
12
|
+
)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export function NextPage() {
|
|
16
|
+
return (
|
|
17
|
+
<div className='p-4'>
|
|
18
|
+
<h1 className='pb-4'>Hello again!</h1>
|
|
19
|
+
<NavButton href='/home'>Go to previous page</NavButton>
|
|
20
|
+
</div>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
function NavButton({ href, children }: { href: string, children: ReactNode }) {
|
|
25
|
+
const navigate = useNavigate();
|
|
26
|
+
return (
|
|
27
|
+
<button className="bg-blue-500 text-white px-4 py-2 rounded cursor-pointer" onClick={() => navigate(href)}>
|
|
28
|
+
{children}
|
|
29
|
+
</button>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { HomePage, NextPage } from "./pages";
|
|
2
|
+
|
|
3
|
+
export const routes = [
|
|
4
|
+
{
|
|
5
|
+
path: '/home',
|
|
6
|
+
Component: HomePage,
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
path: '/next',
|
|
10
|
+
Component: NextPage,
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
path: '*',
|
|
14
|
+
Component: () => <div className="text-red-800 p-4">Not found</div>,
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
4
|
+
"target": "ES2020",
|
|
5
|
+
"useDefineForClassFields": true,
|
|
6
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
7
|
+
"module": "ESNext",
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
|
|
10
|
+
/* Bundler mode */
|
|
11
|
+
"moduleResolution": "bundler",
|
|
12
|
+
"allowImportingTsExtensions": true,
|
|
13
|
+
"verbatimModuleSyntax": true,
|
|
14
|
+
"moduleDetection": "force",
|
|
15
|
+
"noEmit": true,
|
|
16
|
+
"jsx": "react-jsx",
|
|
17
|
+
|
|
18
|
+
/* Linting */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true,
|
|
22
|
+
"erasableSyntaxOnly": true,
|
|
23
|
+
"noFallthroughCasesInSwitch": true,
|
|
24
|
+
"noUncheckedSideEffectImports": true
|
|
25
|
+
},
|
|
26
|
+
"include": ["src"]
|
|
27
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
4
|
+
"target": "ES2022",
|
|
5
|
+
"lib": ["ES2023"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
|
|
9
|
+
/* Bundler mode */
|
|
10
|
+
"moduleResolution": "bundler",
|
|
11
|
+
"allowImportingTsExtensions": true,
|
|
12
|
+
"verbatimModuleSyntax": true,
|
|
13
|
+
"moduleDetection": "force",
|
|
14
|
+
"noEmit": true,
|
|
15
|
+
|
|
16
|
+
/* Linting */
|
|
17
|
+
"strict": true,
|
|
18
|
+
"noUnusedLocals": true,
|
|
19
|
+
"noUnusedParameters": true,
|
|
20
|
+
"erasableSyntaxOnly": true,
|
|
21
|
+
"noFallthroughCasesInSwitch": true,
|
|
22
|
+
"noUncheckedSideEffectImports": true
|
|
23
|
+
},
|
|
24
|
+
"include": ["vite.config.ts"]
|
|
25
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
2
|
+
import react from '@vitejs/plugin-react';
|
|
3
|
+
import { defineConfig } from 'vite';
|
|
4
|
+
import dts from 'vite-plugin-dts'; // Generates TypeScript declarations
|
|
5
|
+
import { vertesiaPluginBuilder } from '@vertesia/plugin-builder';
|
|
6
|
+
|
|
7
|
+
const EXTERNALS = [
|
|
8
|
+
'react',
|
|
9
|
+
'react-dom',
|
|
10
|
+
'react/jsx-runtime',
|
|
11
|
+
'react-dom/client',
|
|
12
|
+
'@vertesia/ui',
|
|
13
|
+
// add any other external dependencies here
|
|
14
|
+
];
|
|
15
|
+
|
|
16
|
+
// https://vite.dev/config/
|
|
17
|
+
export default defineConfig(({ command }) => {
|
|
18
|
+
// Check if we're running "vite build"
|
|
19
|
+
const isBuildMode = command === 'build';
|
|
20
|
+
|
|
21
|
+
return {
|
|
22
|
+
plugins: [
|
|
23
|
+
tailwindcss(),
|
|
24
|
+
react(),
|
|
25
|
+
dts({
|
|
26
|
+
rollupTypes: true,
|
|
27
|
+
tsconfigPath: './tsconfig.app.json',
|
|
28
|
+
logLevel: 'info'
|
|
29
|
+
}),
|
|
30
|
+
vertesiaPluginBuilder(),
|
|
31
|
+
],
|
|
32
|
+
optimizeDeps: isBuildMode ? {
|
|
33
|
+
exclude: EXTERNALS
|
|
34
|
+
} : undefined,
|
|
35
|
+
build: {
|
|
36
|
+
lib: isBuildMode ? {
|
|
37
|
+
entry: './src/index.tsx', // Main entry point of your library
|
|
38
|
+
formats: ['es'], // Build ESM versions
|
|
39
|
+
fileName: "plugin",
|
|
40
|
+
} : undefined,
|
|
41
|
+
minify: false,
|
|
42
|
+
rollupOptions: {
|
|
43
|
+
external: isBuildMode ? EXTERNALS : [],
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
})
|