This commit is contained in:
熊潇 2024-10-14 21:25:13 +08:00
commit 38f2d5ab2c
12 changed files with 3003 additions and 0 deletions

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules
dist

13
index.html Normal file
View File

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

46
package.json Normal file
View File

@ -0,0 +1,46 @@
{
"name": "ct",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"dev": "vite",
"build": " vite build",
"build:lib": "cross-env NODE_MODE=lib vite build",
"lib": " npm run build:lib",
"clean": "rimraf dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"lit-html": "^3.2.1"
},
"devDependencies": {
"@eslint/js": "^9.10.0",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/typography": "^0.5.15",
"@types/node": "^22.5.4",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"cross-env": "^7.0.3",
"eslint": "^9.10.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.11",
"globals": "^15.9.0",
"rimraf": "^6.0.1",
"tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.11",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.6.2",
"typescript-eslint": "^8.5.0",
"vite": "^5.4.4"
},
"resolutions": {
"picomatch": "^4"
},
"packageManager": "pnpm@9.8.0+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"
}

2746
pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load Diff

10
src/index.ts Normal file
View File

@ -0,0 +1,10 @@
import { render, html } from 'lit-html';
import './style.css';
export const Hello = () => {
return html` <div class="hello">hello world</div> `;
};
// 渲染到指定 DOM 节点
const container1 = document.getElementById('root');
render(Hello(), container1!);

9
src/style.css Normal file
View File

@ -0,0 +1,9 @@
/* @tailwind base; */
@tailwind components;
@tailwind utilities;
@layer components {
.hello {
@apply text-2xl font-bold text-center;
}
}

17
src/util.ts Normal file
View File

@ -0,0 +1,17 @@
export const loadCSS = (path: string, id: string, froce?: boolean) => {
if (id) {
const oldLink = document.querySelector('#' + id);
if (!froce && oldLink) {
return;
}
if (oldLink) {
oldLink.remove();
}
}
const link = document.createElement('link');
link.href = path;
link.id = id;
link.type = 'text/css';
link.rel = 'stylesheet';
document.head.appendChild(link);
};

29
tailwind.config.js Normal file
View File

@ -0,0 +1,29 @@
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ['class'],
content: ['./src/**/*.{ts,tsx}'],
plugins: [require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography'), require('tailwindcss-animate')],
theme: {
extend: {},
screen: {
sm: '640px',
// => @media (min-width: 640px) { ... }
md: '768px',
// => @media (min-width: 768px) { ... }
lg: '1024px',
// => @media (min-width: 1024px) { ... }
xl: '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @media (min-width: 1536px) { ... }
'3xl': '1920px',
// => @media (min-width: 1920) { ... }
'4xl': '2560px',
// => @media (min-width: 2560) { ... }
},
},
};

25
tsconfig.app.json Normal file
View File

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
"allowUnusedLabels": true,
"noImplicitAny": false,
/* Linting */
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}

7
tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

24
tsconfig.node.json Normal file
View File

@ -0,0 +1,24 @@
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"allowUnusedLabels": true,
"noImplicitAny": false,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}

75
vite.config.ts Normal file
View File

@ -0,0 +1,75 @@
import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
import path from 'path';
import nesting from 'tailwindcss/nesting';
const isLib = process.env.NODE_MODE === 'lib';
// https://vitejs.dev/config/
const configLib = defineConfig({
plugins: [],
css: {
postcss: {
// @ts-ignore
plugins: [nesting, tailwindcss, autoprefixer],
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
build: {
lib: {
entry: 'src/button.ts', // 入口文件,库的主入口
formats: ['es'], // 输出格式
fileName: () => `button.js`, // 输出的文件名
},
minify: true,
},
});
const configServer = defineConfig({
plugins: [],
base: './',
css: {
postcss: {
// @ts-ignore
plugins: [nesting, tailwindcss, autoprefixer],
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
build: {
minify: false,
terserOptions: {},
rollupOptions: {
output: {
dir: 'dist/docs',
assetFileNames: () => {
// return 'assets/[name]-[hash].[ext]'; // 其他静态资源仍使用hash
return '[name].[ext]'; // 其他静态资源仍使用hash
},
entryFileNames: 'index.js',
},
},
},
define: {
DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
},
server: {
port: 6015,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/api'),
},
},
},
});
const config = isLib ? configLib : configServer;
export default config;