test/test-valtio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
熊潇
2025-12-14 11:29:43 +08:00
commit 240ea1b774
15 changed files with 2327 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.gitignore vendored Normal file
View File

@@ -0,0 +1,15 @@
.env
!.env*development
node_modules
dist
pack-dist
.DS_Store
.pnpm-store
.vite
.astro

15
bun.config.ts Normal file
View File

@@ -0,0 +1,15 @@
import { build } from 'bun';
await build({
entrypoints: ["./src/lib.ts"],
outdir: './dist',
target: 'browser',
format: 'esm',
naming: {
entry: 'app.js',
},
minify: false,
sourcemap: false,
});
console.log('✅ Build complete: dist/app.js');

15
index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light Code</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/main.ts"></script>
</body>
</html>

25
kevisual.json Normal file
View File

@@ -0,0 +1,25 @@
{
"metadata": {
"name": "kevisual",
"share": "public"
},
"registry": "https://kevisual.cn/root/ai/kevisual/frontend/simple-lit-vite",
"clone": {
".": {
"enabled": true
}
},
"syncd": [
{
"files": [
"**/*"
],
"registry": ""
}
],
"sync": {
".gitignore": {
"url": "/gitignore.txt"
}
}
}

45
package.json Normal file
View File

@@ -0,0 +1,45 @@
{
"name": "@kevisual/simple-lit-vite",
"version": "0.0.1",
"description": "",
"basename": "/root/simple-lit-vite",
"scripts": {
"dev": "vite",
"build": "vite build",
"build:lib": "bun bun.config.ts",
"prepub": "rm -rf ./dist && rimraf ./pack-dist && pnpm run build:test",
"pub": "envision deploy ./dist -k simple-lit-vite -v 0.0.1"
},
"keywords": [],
"author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
"license": "MIT",
"packageManager": "pnpm@10.25.0",
"type": "module",
"dependencies": {
"@kevisual/app": "^0.0.1",
"@kevisual/context": "^0.0.4",
"dayjs": "^1.11.19",
"lit-html": "^3.3.1",
"nanoid": "^5.1.6",
"react": "^19.2.1",
"react-dom": "^19.2.1",
"valtio": "^2.2.0",
"zustand": "^5.0.9"
},
"devDependencies": {
"@kevisual/query": "0.0.31",
"@kevisual/types": "^0.0.10",
"@tailwindcss/vite": "^4.1.17",
"@types/bun": "^1.3.4",
"@types/node": "^24.10.2",
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.2",
"dotenv": "^17.2.3",
"tailwindcss": "^4.1.17",
"vite": "^7.2.7"
},
"publishConfig": {
"access": "public"
}
}

1963
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

58
readme.md Normal file
View File

@@ -0,0 +1,58 @@
# valtio
使用valtio的例子
```bash
pnpm install
pnpm dev
```
效果图：
```ts
import { proxy, subscribe, snapshot } from 'valtio/vanilla'
type Store = {
count: number
list?: () => Promise<any>
increment?: () => void
data?: any
}
export const store = proxy<Store>({
count: 0,
data: []
})
store.increment = function () {
this.count += 1
}
store.list = async function () {
const res = await fetch('https://jsonplaceholder.typicode.com/todos')
const data = await res.json()
console.log('fetched data:', Date.now())
this.data = data
return data
}
// subscribe(store, () => {
// console.log('store changed:', store)
// })
// subscribe counter changes
subscribe(store, () => {
console.log('count changed:', store.count)
// console.log('proxy data:', store.data)
// console.log('snapshot data:', snapshot(store).data)
})
store.increment()
store.increment()
store.increment()
store.increment()
store.increment()
store.increment()
store.increment()
store.list()
store.list()
```

15
src/app.tsx Normal file
View File

@@ -0,0 +1,15 @@
export const App = () => {
return (
<div>
<h1 className="bg-red-200">Hello Vite + React Simple vite</h1>
<div className='card'>
<button type='button' onClick={() => alert('Button clicked!')}>
Click me
</button>
</div>
<kv-template></kv-template>
</div>
);
};
export {};

1
src/index.css Normal file
View File

@@ -0,0 +1 @@
@import "tailwindcss";

49
src/lib.ts Normal file
View File

@@ -0,0 +1,49 @@
import { render } from 'lit-html';
import { html, TemplateResult } from 'lit-html';
class KvTemplate extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
}
private render(): void {
const content: TemplateResult = html`
<style>
:host {
display: block;
padding: 16px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f5f5f5;
}
.container {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 16px;
}
p {
color: #666;
line-height: 1.5;
}
</style>
<div class="container">
<h1>KV Template Component</h1>
<p>This is a sample custom element using Lit-HTML.</p>
<p>Current time: ${new Date().toLocaleString()}</p>
</div>
`;
render(content, this.shadowRoot!);
}
}
// Define the custom element globally
customElements.define('kv-template', KvTemplate);

7
src/main.ts Normal file
View File

@@ -0,0 +1,7 @@
import { createRoot } from 'react-dom/client';
import './lib'
import { App } from './app';
import './index.css';
import { store } from './store.ts';
store.increment();
createRoot(document.getElementById('root')!).render(App());

46
src/store.ts Normal file
View File

@@ -0,0 +1,46 @@
import { proxy, subscribe, snapshot } from 'valtio/vanilla'
type Store = {
count: number
list?: () => Promise<any>
increment?: () => void
data?: any
}
export const store = proxy<Store>({
count: 0,
data: []
})
store.increment = function () {
this.count += 1
}
store.list = async function () {
const res = await fetch('https://jsonplaceholder.typicode.com/todos')
const data = await res.json()
console.log('fetched data:', Date.now())
this.data = data
return data
}
// subscribe(store, () => {
// console.log('store changed:', store)
// })
// subscribe counter changes
subscribe(store, () => {
console.log('count changed:', store.count)
// console.log('proxy data:', store.data)
// console.log('snapshot data:', snapshot(store).data)
})
store.increment()
store.increment()
store.increment()
store.increment()
store.increment()
store.increment()
store.increment()
store.list()
store.list()

20
tsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"extends": "@kevisual/types/json/frontend.json",
"compilerOptions": {
"baseUrl": ".",
"strict": false,
"paths": {
"@/*": [
"./src/*"
],
"@/agent": [
"./src/agent"
]
},
},
"include": [
"src/**/*",
"agent/**/*",
"typings.d.ts"
],
}

9
typings.d.ts vendored Normal file
View File

@@ -0,0 +1,9 @@
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
'kv-template': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
}
}
}

44
vite.config.ts Normal file
View File

@@ -0,0 +1,44 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import pkgs from './package.json';
import tailwindcss from '@tailwindcss/vite';
import dotenv from 'dotenv';
dotenv.config();
const isDev = process.env.NODE_ENV === 'development';
const plugins = [react(), tailwindcss()];
let target = process.env.VITE_API_URL || 'http://localhost:51015';
const apiProxy = { target: target, changeOrigin: true, ws: true, rewriteWsOrigin: true, secure: false, cookieDomainRewrite: 'localhost' };
let proxy = {
'/root/': apiProxy,
'/api': apiProxy,
'/client': apiProxy,
};
const ENV_BASE_NAME = process.env.BASE_NAME;
const _basename = ENV_BASE_NAME || pkgs.basename;
const basename = isDev ? undefined : `${_basename}`;
/**
* @see https://vitejs.dev/config/
*/
export default defineConfig(() => {
return {
plugins,
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
base: basename,
define: {
BASE_NAME: JSON.stringify(basename),
BUILD_TIME: JSON.stringify(new Date().toISOString()),
},
server: {
port: 7008,
host: '0.0.0.0',
proxy,
},
};
});