Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit f83900f

Browse files
codebender828codebender828
authored
Merge pull request #39 from chakra-ui/feat/vite-auto-import
feat: vite components auto import for `@chakra-ui/vue-next`
2 parents 7c107a9 + 3334ffd commit f83900f

File tree

13 files changed

+165
-15
lines changed

13 files changed

+165
-15
lines changed

‎_templates/generator/component/README.md.ejs.t renamed to ‎_templates/generator/tooling/README.md.ejs.t

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
to: packages/<%=h.changeCase.paramCase(name)%>/README.md
2+
to: tooling/<%=h.changeCase.paramCase(name)%>/README.md
33
---
44

55
# @chakra-ui/<%=h.changeCase.paramCase(name)%>

‎_templates/generator/tooling/package.json.ejs.t

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
to: tooling/<%=h.changeCase.paramCase(name)%>/package.json
3+
---
4+
5+
{
6+
"name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
7+
"version": "1.0.0",
8+
"main": "dist/cjs/index.js",
9+
"module": "dist/esm/index.js",
10+
"types": "dist/types/index.d.ts",
11+
"typings": "dist/types/index.d.ts",
12+
"files": [
13+
"dist"
14+
],
15+
"description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",
16+
"repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
17+
"author": "Jonathan Bakebwa [email protected]",
18+
"license": "MIT",
19+
"scripts": {
20+
"build": "rimraf ./dist && concurrently yarn:build:*",
21+
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
22+
"build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
23+
"build:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
24+
"watch": "concurrently yarn:watch:*",
25+
"watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
26+
"watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
27+
"watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
28+
}
29+
}

‎_templates/generator/tooling/src.ts.ejs.t

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
to: tooling/<%=h.changeCase.paramCase(name)%>/src/index.ts
3+
---
4+
const <%= h.changeCase.pascalCase(name) %> = () => {
5+
return {}
6+
}
7+
8+
export {
9+
<%= h.changeCase.pascalCase(name) %>
10+
}

‎_templates/generator/tooling/test-file.test.ts.ejs.t

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
to: tooling/<%=h.changeCase.paramCase(name)%>/tests/<%=h.changeCase.paramCase(name)%>.test.ts
3+
---
4+
import { <%= h.changeCase.pascalCase(name) %> } from '../'
5+
6+
7+
it('should be truthy', () => {
8+
expect(1).toBe(1)
9+
})

‎_templates/generator/tooling/tsconfig.json.ejs.t

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
to: tooling/<%=h.changeCase.paramCase(name)%>/tsconfig.json
3+
---
4+
5+
{
6+
"extends": "../../tsconfig.json",
7+
"include": ["src"]
8+
}

‎lerna.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"packages": ["packages/*", "website", "docs"],
2+
"packages": ["packages/*", "website", "docs", "tooling/*"],
33
"version": "independent",
44
"npmClient": "yarn",
55
"useWorkspaces": true,

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"author": "Jonathan Bakebwa [email protected]",
88
"workspaces": [
99
"packages/*",
10+
"tooling/*",
1011
"website"
1112
],
1213
"scripts": {
@@ -28,6 +29,7 @@
2829
"system": "yarn workspace @chakra-ui/vue-system",
2930
"utils": "yarn workspace @chakra-ui/vue-utils",
3031
"theme": "yarn workspace @chakra-ui/vue-theme",
32+
"auto-import": "yarn workspace @chakra-ui/vue-auto-import",
3133
"c-alert": "yarn workspace @chakra-ui/c-alert",
3234
"c-theme-provider": "yarn workspace @chakra-ui/c-theme-provider",
3335
"c-box": "yarn workspace @chakra-ui/c-box",

‎tooling/auto-import/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# `@chakra-ui/vue-auto-import`
2+
3+
If you use [Vite](https://vitejs.org), you can use this package to auto import components for you so that you needn't manually import components from Chakra UI Vue that you want to consume.
4+
5+
6+
This package depends on the [`vite-plugin-components`]() to help resolve components from the template. `@chakra-ui/vue-auto-import` exports a `componentResolverFunction` that will identify Chakra UI Vue components and resolve them for you.
7+
8+
## Installation
9+
10+
```sh
11+
yarn add @chakra-ui/vue-auto-import && yarn add -D vite-plugin-components
12+
# or
13+
npm i @chakra-ui/vue-auto-import && npm install --dev vite-plugin-components
14+
```
15+
16+
## Usage
17+
```ts
18+
// In `vite.config.ts` file
19+
20+
import { defineConfig } from 'vite'
21+
import ComponentsPlugin from 'vite-plugin-components'
22+
import { componentResolver } from '@chakra-ui/vue-auto-import'
23+
24+
25+
export default defineConfig({
26+
plugins: [
27+
ComponentsPlugin({
28+
customComponentResolvers: [componentResolver]
29+
})
30+
]
31+
})
32+
```
33+
34+
That's it! In your template, you can use it as follows:
35+
```vue
36+
<template>
37+
<c-alert status="info" mb="3">
38+
<c-alert-title> Info alert </c-alert-title>
39+
<c-alert-description> Something just happened </c-alert-description>
40+
</c-alert>
41+
</template>
42+
```

‎tooling/auto-import/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "@chakra-ui/vue-auto-import",
3+
"version": "0.0.1-alpha.0",
4+
"main": "dist/cjs/index.js",
5+
"module": "dist/esm/index.js",
6+
"types": "dist/types/index.d.ts",
7+
"typings": "dist/types/index.d.ts",
8+
"files": [
9+
"dist"
10+
],
11+
"description": "Chakra UI Vue | VueAutoImport module",
12+
"repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
13+
"author": "Jonathan Bakebwa [email protected]",
14+
"license": "MIT",
15+
"scripts": {
16+
"build": "rimraf ./dist && concurrently yarn:build:*",
17+
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
18+
"build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
19+
"build:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
20+
"watch": "concurrently yarn:watch:*",
21+
"watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
22+
"watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
23+
"watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
24+
},
25+
"dependencies": {
26+
"lodash.kebabcase": "^4.1.1"
27+
},
28+
"peerDependencies": {
29+
"vite": "^2.0.0-beta.44",
30+
"vue": "^3.0.5",
31+
"vite-plugin-components": "^0.6.6"
32+
}
33+
}

‎tooling/auto-import/src/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import kebabCase from 'lodash.kebabcase'
2+
3+
export const componentResolver = (name: string) => {
4+
if (kebabCase(name).startsWith('c-'))
5+
return {
6+
importName: name,
7+
path: `@chakra-ui/vue-next`,
8+
}
9+
}

0 commit comments

Comments
 (0)