Skip to content

Commit 80e7b68

Browse files
fi3eworkfi3ework
committed
feat(template): add Vue
1 parent 1a67571 commit 80e7b68

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+929
-14
lines changed

‎packages/create-rslib/fragments/base/vue-js/package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "rslib-vue-js",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"exports": {
6+
".": {
7+
"types": "./dist/index.d.ts",
8+
"import": "./dist/index.js"
9+
}
10+
},
11+
"types": "./dist/index.d.ts",
12+
"files": [
13+
"dist"
14+
],
15+
"scripts": {
16+
"build": "rslib build",
17+
"dev": "rslib build --watch"
18+
},
19+
"devDependencies": {
20+
"@rsbuild/plugin-vue": "^1.0.7",
21+
"@rslib/core": "workspace:*",
22+
"typescript": "^5.8.3",
23+
"vue": "^3.2.0"
24+
},
25+
"peerDependencies": {
26+
"vue": "^3.2.0"
27+
}
28+
}

‎packages/create-rslib/fragments/base/vue-js/rslib.config.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { pluginVue } from '@rsbuild/plugin-vue';
2+
import { defineConfig } from '@rslib/core';
3+
4+
export default defineConfig({
5+
lib: [
6+
{
7+
format: 'esm',
8+
output: {
9+
target: 'web',
10+
},
11+
},
12+
],
13+
plugins: [pluginVue()],
14+
});

‎packages/create-rslib/fragments/base/vue-js/src/Button.vue

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<button
3+
type="button"
4+
:class="['demo-button', `demo-button--${size}`, mode]"
5+
:style="{ backgroundColor }"
6+
@click="onClick"
7+
>
8+
{{ label }}
9+
</button>
10+
</template>
11+
12+
<script>
13+
import './button.css';
14+
15+
export default {
16+
name: 'Button',
17+
props: {
18+
primary: {
19+
type: Boolean,
20+
default: false,
21+
},
22+
backgroundColor: {
23+
type: String,
24+
default: undefined,
25+
},
26+
size: {
27+
type: String,
28+
default: 'medium',
29+
validator: (value) => ['small', 'medium', 'large'].includes(value),
30+
},
31+
label: {
32+
type: String,
33+
required: true,
34+
},
35+
onClick: {
36+
type: Function,
37+
default: undefined,
38+
},
39+
},
40+
computed: {
41+
mode() {
42+
return this.primary ? 'demo-button--primary' : 'demo-button--secondary';
43+
},
44+
},
45+
};
46+
</script>

‎packages/create-rslib/fragments/base/vue-js/src/button.css

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.demo-button {
2+
font-weight: 700;
3+
border: 0;
4+
border-radius: 3em;
5+
cursor: pointer;
6+
display: inline-block;
7+
line-height: 1;
8+
}
9+
10+
.demo-button--primary {
11+
color: white;
12+
background-color: #1ea7fd;
13+
}
14+
15+
.demo-button--secondary {
16+
color: #333;
17+
background-color: transparent;
18+
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
19+
}
20+
21+
.demo-button--small {
22+
font-size: 12px;
23+
padding: 10px 16px;
24+
}
25+
26+
.demo-button--medium {
27+
font-size: 14px;
28+
padding: 11px 20px;
29+
}
30+
31+
.demo-button--large {
32+
font-size: 16px;
33+
padding: 12px 24px;
34+
}

‎packages/create-rslib/fragments/base/vue-js/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Button } from './Button.vue';

‎packages/create-rslib/fragments/base/vue-js/tsconfig.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"lib": ["DOM", "ES2020"],
4+
"jsx": "preserve",
5+
"target": "ES2020",
6+
"noEmit": true,
7+
"skipLibCheck": true,
8+
"jsxImportSource": "vue",
9+
"useDefineForClassFields": true,
10+
11+
/* modules */
12+
"module": "ESNext",
13+
"isolatedModules": true,
14+
"resolveJsonModule": true,
15+
"moduleResolution": "bundler",
16+
"allowImportingTsExtensions": true,
17+
18+
/* type checking */
19+
"strict": true,
20+
"noUnusedLocals": true,
21+
"noUnusedParameters": true
22+
},
23+
"include": ["src"]
24+
}

‎packages/create-rslib/fragments/tools/storybook-vue-js/.storybook/main.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { dirname, join } from 'node:path';
2+
3+
/**
4+
* This function is used to resolve the absolute path of a package.
5+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
6+
*/
7+
function getAbsolutePath(value) {
8+
return dirname(require.resolve(join(value, 'package.json')));
9+
}
10+
11+
const config = {
12+
stories: [
13+
'../stories/**/*.mdx',
14+
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
15+
],
16+
addons: [
17+
'@storybook/addon-onboarding',
18+
'@storybook/addon-links',
19+
'@storybook/addon-essentials',
20+
'@storybook/addon-interactions',
21+
{
22+
name: getAbsolutePath('storybook-addon-rslib'),
23+
},
24+
],
25+
framework: {
26+
name: getAbsolutePath('storybook-vue3-rsbuild'),
27+
options: {},
28+
},
29+
docs: {
30+
autodocs: 'tag',
31+
},
32+
typescript: {
33+
check: true,
34+
},
35+
};
36+
37+
export default config;

‎packages/create-rslib/fragments/tools/storybook-vue-js/.storybook/preview.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const preview = {
2+
parameters: {
3+
controls: {
4+
matchers: {
5+
color: /(background|color)$/i,
6+
date: /Date$/i,
7+
},
8+
},
9+
},
10+
};
11+
12+
export default preview;

‎packages/create-rslib/fragments/tools/storybook-vue-js/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"scripts": {
3+
"build:storybook": "storybook build",
4+
"storybook": "storybook dev"
5+
},
6+
"devDependencies": {
7+
"@rsbuild/core": "1.3.14",
8+
"@storybook/addon-essentials": "^8.6.12",
9+
"@storybook/addon-interactions": "^8.6.12",
10+
"@storybook/addon-links": "^8.6.12",
11+
"@storybook/addon-onboarding": "^8.6.12",
12+
"@storybook/blocks": "^8.6.12",
13+
"@storybook/test": "^8.6.12",
14+
"@storybook/vue3": "^8.6.12",
15+
"storybook": "^8.6.12",
16+
"storybook-addon-rslib": "^1.0.1",
17+
"storybook-vue3-rsbuild": "^1.0.1"
18+
}
19+
}

‎packages/create-rslib/fragments/tools/storybook-vue-js/stories/Button.stories.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { fn } from '@storybook/test';
2+
import Button from '../src/Button';
3+
4+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
5+
const meta = {
6+
title: 'Example/Button',
7+
component: Button,
8+
parameters: {
9+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
10+
layout: 'centered',
11+
},
12+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
13+
tags: ['autodocs'],
14+
// More on argTypes: https://storybook.js.org/docs/api/argtypes
15+
argTypes: {
16+
backgroundColor: { control: 'color' },
17+
},
18+
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
19+
args: { onClick: fn() },
20+
};
21+
22+
export default meta;
23+
24+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
25+
export const Primary = {
26+
args: {
27+
primary: true,
28+
label: 'Button',
29+
},
30+
};
31+
32+
export const Secondary = {
33+
args: {
34+
label: 'Button',
35+
},
36+
};
37+
38+
export const Large = {
39+
args: {
40+
size: 'large',
41+
label: 'Button',
42+
},
43+
};
44+
45+
export const Small = {
46+
args: {
47+
size: 'small',
48+
label: 'Button',
49+
},
50+
};

‎packages/create-rslib/fragments/tools/vitest-react-js/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"devDependencies": {
66
"@testing-library/jest-dom": "^6.6.3",
77
"@testing-library/react": "^16.3.0",
8+
"@vitejs/plugin-vue": "^5.2.3",
89
"jsdom": "^26.1.0",
910
"vitest": "^3.1.2"
1011
}

‎packages/create-rslib/fragments/tools/vitest-react-js/tests/index.test.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { render, screen } from '@testing-library/react';
1+
import { render, screen } from '@testing-library/vue';
22
import { expect, test } from 'vitest';
3-
import { Button } from '../src/Button';
3+
import { Button } from '../src/Button.vue';
44

55
test('The button should have correct background color', async () => {
66
render(<Button backgroundColor="#ccc" label="Demo Button" />);

‎packages/create-rslib/fragments/tools/vitest-react-js/vitest.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/// <reference types="vitest/config" />
22

3+
import pluginVue from '@vitejs/plugin-vue';
34
import { defineConfig } from 'vitest/config';
45

56
export default defineConfig({
@@ -8,4 +9,5 @@ export default defineConfig({
89
environment: 'jsdom',
910
setupFiles: './vitest.setup.js',
1011
},
12+
plugins: [pluginVue()],
1113
});

‎packages/create-rslib/fragments/tools/vitest-vue-js/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"scripts": {
3+
"test": "vitest run"
4+
},
5+
"devDependencies": {
6+
"@testing-library/jest-dom": "^6.6.3",
7+
"@testing-library/vue": "^8.1.0",
8+
"@vitejs/plugin-vue": "^5.2.3",
9+
"jsdom": "^26.1.0",
10+
"vitest": "^3.1.2"
11+
}
12+
}

‎packages/create-rslib/fragments/tools/vitest-vue-js/tests/index.test.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { render, screen } from '@testing-library/vue';
2+
import { expect, test } from 'vitest';
3+
import Button from '../src/Button.vue';
4+
5+
test('The button should have correct background color', async () => {
6+
render(Button, {
7+
props: {
8+
backgroundColor: '#ccc',
9+
label: 'Demo Button',
10+
},
11+
});
12+
const button = screen.getByText('Demo Button');
13+
expect(button).toHaveStyle({
14+
backgroundColor: '#ccc',
15+
});
16+
});

‎packages/create-rslib/fragments/tools/vitest-vue-js/vitest.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/// <reference types="vitest/config" />
2+
3+
import pluginVue from '@vitejs/plugin-vue';
4+
import { defineConfig } from 'vitest/config';
5+
6+
export default defineConfig({
7+
// Configure Vitest (https://vitest.dev/config/)
8+
test: {
9+
environment: 'jsdom',
10+
setupFiles: './vitest.setup.js',
11+
},
12+
plugins: [pluginVue()],
13+
});

‎packages/create-rslib/fragments/tools/vitest-vue-js/vitest.setup.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@testing-library/jest-dom/vitest';

‎packages/create-rslib/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
"create-rslib": "./dist/index.js"
1919
},
2020
"files": [
21-
"template-*",
21+
"templates",
2222
"dist"
2323
],
2424
"scripts": {
25-
"build": "rslib build && pnpm generate-templates",
25+
"build": "rslib build",
2626
"dev": "rslib build --watch",
2727
"generate-templates": "pnpm tsx ./src/genTemplates.ts",
2828
"start": "node ./dist/index.js",

‎packages/create-rslib/rslib.config.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import { pluginPublint } from 'rsbuild-plugin-publint';
22
import { defineConfig } from 'rslib';
3+
const { execSync } = require('node:child_process');
34

45
export default defineConfig({
56
lib: [{ format: 'esm' }],
6-
plugins: [pluginPublint()],
7+
plugins: [
8+
pluginPublint(),
9+
{
10+
name: 'rslib:run-generate-template-hook',
11+
setup: (api) => {
12+
api.onAfterBuild(() => {
13+
execSync('pnpm run generate-templates', { stdio: 'inherit' });
14+
});
15+
},
16+
},
17+
],
718
});

0 commit comments

Comments
 (0)