Merge pull request #40 from chakra-ui/develop

codebender828 · web-flow · commit f1f7ffdd69f2 · 2021-03-25T21:58:29.000+08:00
chore: release `@chakra-ui/vue-auto-import` component resolver
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -22,10 +22,12 @@
     "@chakra-ui/vue-theme": "0.0.0",
     "@chakra-ui/vue-theme-tools": "0.0.0",
     "@chakra-ui/vue-utils": "0.0.0",
-    "@chakra-ui/vue-docs": "0.0.0"
+    "@chakra-ui/vue-docs": "0.0.0",
+    "@chakra-ui/vue-auto-import": "0.0.1-alpha.0"
   },
   "changesets": [
     "chilly-tables-care",
-    "empty-dragons-wait"
+    "empty-dragons-wait",
+    "slimy-bugs-give"
   ]
 }
diff --git a/.changeset/slimy-bugs-give.md b/.changeset/slimy-bugs-give.md
@@ -0,0 +1,5 @@
+---
+'@chakra-ui/vue-auto-import': patch
+---
+
+Initial release for vite-auto-import plugin
diff --git a/_templates/generator/tooling/README.md.ejs.t b/_templates/generator/tooling/README.md.ejs.t
@@ -1,5 +1,5 @@
 ---
-to: packages/<%=h.changeCase.paramCase(name)%>/README.md
+to: tooling/<%=h.changeCase.paramCase(name)%>/README.md
 ---
 
 # @chakra-ui/<%=h.changeCase.paramCase(name)%>
diff --git a/_templates/generator/tooling/package.json.ejs.t b/_templates/generator/tooling/package.json.ejs.t
@@ -0,0 +1,29 @@
+---
+to: tooling/<%=h.changeCase.paramCase(name)%>/package.json
+---
+
+{
+  "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
+  "author": "Jonathan Bakebwa codebender828@gmail.com",
+  "license": "MIT",
+  "scripts": {
+    "build": "rimraf ./dist && concurrently yarn:build:*",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
+    "build:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
+    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
+  }
+}
diff --git a/_templates/generator/tooling/src.ts.ejs.t b/_templates/generator/tooling/src.ts.ejs.t
@@ -0,0 +1,10 @@
+---
+to: tooling/<%=h.changeCase.paramCase(name)%>/src/index.ts
+---
+const <%= h.changeCase.pascalCase(name) %> = () => {
+  return {}
+}
+
+export {
+  <%= h.changeCase.pascalCase(name) %>
+}
diff --git a/_templates/generator/tooling/test-file.test.ts.ejs.t b/_templates/generator/tooling/test-file.test.ts.ejs.t
@@ -0,0 +1,9 @@
+---
+to: tooling/<%=h.changeCase.paramCase(name)%>/tests/<%=h.changeCase.paramCase(name)%>.test.ts
+---
+import { <%= h.changeCase.pascalCase(name) %> } from '../'
+
+
+it('should be truthy', () => {
+  expect(1).toBe(1)
+})
diff --git a/_templates/generator/tooling/tsconfig.json.ejs.t b/_templates/generator/tooling/tsconfig.json.ejs.t
@@ -0,0 +1,8 @@
+---
+to: tooling/<%=h.changeCase.paramCase(name)%>/tsconfig.json
+---
+
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "packages": ["packages/*", "website", "docs"],
+  "packages": ["packages/*", "website", "docs", "tooling/*"],
   "version": "independent",
   "npmClient": "yarn",
   "useWorkspaces": true,
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "author": "Jonathan Bakebwa codebender828@gmail.com",
   "workspaces": [
     "packages/*",
+    "tooling/*",
     "website"
   ],
   "scripts": {
@@ -28,6 +29,7 @@
     "system": "yarn workspace @chakra-ui/vue-system",
     "utils": "yarn workspace @chakra-ui/vue-utils",
     "theme": "yarn workspace @chakra-ui/vue-theme",
+    "auto-import": "yarn workspace @chakra-ui/vue-auto-import",
     "c-alert": "yarn workspace @chakra-ui/c-alert",
     "c-theme-provider": "yarn workspace @chakra-ui/c-theme-provider",
     "c-box": "yarn workspace @chakra-ui/c-box",
diff --git a/tooling/auto-import/CHANGELOG.md b/tooling/auto-import/CHANGELOG.md
@@ -0,0 +1,8 @@
+# @chakra-ui/vue-auto-import
+
+## 0.0.1-alpha.1
+### Patch Changes
+
+
+
+- Initial release for vite-auto-import plugin
diff --git a/tooling/auto-import/README.md b/tooling/auto-import/README.md
@@ -0,0 +1,42 @@
+# `@chakra-ui/vue-auto-import`
+
+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.
+
+
+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.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/vue-auto-import && yarn add -D vite-plugin-components
+# or
+npm i @chakra-ui/vue-auto-import && npm install --dev vite-plugin-components
+```
+
+## Usage
+```ts
+// In `vite.config.ts` file
+
+import { defineConfig } from 'vite'
+import ComponentsPlugin from 'vite-plugin-components'
+import { componentResolver } from '@chakra-ui/vue-auto-import'
+
+
+export default defineConfig({
+  plugins: [
+    ComponentsPlugin({
+      customComponentResolvers: [componentResolver]
+    })
+  ]
+})
+```
+
+That's it! In your template, you can use it as follows:
+```vue
+<template>
+  <c-alert status="info" mb="3">
+    <c-alert-title> Info alert </c-alert-title>
+    <c-alert-description> Something just happened </c-alert-description>
+  </c-alert>
+</template>
+```
diff --git a/tooling/auto-import/package.json b/tooling/auto-import/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@chakra-ui/vue-auto-import",
+  "version": "0.0.1-alpha.1",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "description": "Chakra UI Vue | VueAutoImport module",
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
+  "author": "Jonathan Bakebwa codebender828@gmail.com",
+  "license": "MIT",
+  "scripts": {
+    "build": "rimraf ./dist && concurrently yarn:build:*",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
+    "build:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
+    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
+  },
+  "dependencies": {
+    "lodash.kebabcase": "^4.1.1"
+  },
+  "peerDependencies": {
+    "vite": "^2.0.0-beta.44",
+    "vue": "^3.0.5",
+    "vite-plugin-components": "^0.6.6"
+  }
+}
diff --git a/tooling/auto-import/src/index.ts b/tooling/auto-import/src/index.ts
@@ -0,0 +1,9 @@
+import kebabCase from 'lodash.kebabcase'
+
+export const componentResolver = (name: string) => {
+  if (kebabCase(name).startsWith('c-'))
+    return {
+      importName: name,
+      path: `@chakra-ui/vue-next`,
+  }
+}
diff --git a/tooling/auto-import/tests/vue-auto-import.test.ts b/tooling/auto-import/tests/vue-auto-import.test.ts
@@ -0,0 +1,15 @@
+import { componentResolver } from '../src'
+
+it('should resolve chakra components with import name and path', () => {
+  const components = [
+    'CColorModeProvider',
+    'CBox',
+    'CPortal'
+  ]
+
+  const path = '@chakra-ui/vue-next'
+
+  components.forEach((templateComponent: string) => {
+    expect(componentResolver(templateComponent)).toEqual({ importName: templateComponent, path })
+  });
+})
diff --git a/tooling/auto-import/tsconfig.json b/tooling/auto-import/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import ComponentsPlugin from 'vite-plugin-components'
 import Pages from 'vite-plugin-pages'
-import kebabCase from 'lodash.kebabcase'
+import { componentResolver } from '@chakra-ui/vue-auto-import'
 import path from 'path'
 
 export default defineConfig({
@@ -32,18 +32,7 @@ export default defineConfig({
       },
     }),
     ComponentsPlugin({
-      customComponentResolvers: [
-        /**
-         * Handle auto-imports from @chakra-ui/vue-next
-         */
-        (name: string) => {
-          if (kebabCase(name).startsWith('c-'))
-            return {
-              importName: name,
-              path: `@chakra-ui/vue-next`,
-            }
-        },
-      ],
+      customComponentResolvers: [componentResolver],
     }),
   ],
 })

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@chakra-ui/vue-auto-import': patch
 +---
++
 +Initial release for vite-auto-import plugin
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "packages": ["packages/*", "website", "docs"],`
	`2`	`+ "packages": ["packages/", "website", "docs", "tooling/"],`
`3`	`3`	`"version": "independent",`
`4`	`4`	`"npmClient": "yarn",`
`5`	`5`	`"useWorkspaces": true,`