feat(playground): create vie playground

codebender828 · codebender828 · commit a230a41a0359 · 2020-10-06T09:42:34.000+08:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,7 @@
 node_modules
-dist
+dist
+
+# At the time of writing this, I could not find any helpful
+# documentation for adding ESLint for Vue 3 projects running on Vite.
+# For this reason, we ignore the playground directory.
+playground
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -5,10 +5,20 @@ env:
 extends:
   - prettier/@typescript-eslint
   - plugin:prettier/recommended
+  - plugin:vue/essential
+  - '@vue/typescript/recommended'
 parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaVersion: 12
   sourceType: module
 plugins:
   - '@typescript-eslint'
-rules: {}
+rules: 
+  '@typescript-eslint/member-delimiter-style':
+    - error
+    - multiline:
+        delimiter: none
+        requireLast: false
+      singleline:
+        delimiter: comma
+        requireLast: false
diff --git a/_templates/generator/component/component.ts.ejs.t b/_templates/generator/component/component.ts.ejs.t
@@ -2,7 +2,7 @@
 to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
 ---
 
-import { h, defineComponent } from 'vue'
+import { h, defineComponent, PropType } from 'vue'
 
 const <%= h.changeCase.pascalCase(name) %> = defineComponent({
   props: {
diff --git a/_templates/generator/component/package.json.ejs.t b/_templates/generator/component/package.json.ejs.t
@@ -5,14 +5,21 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
   "version": "1.0.0",
-  "main": "index.js",
+  "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) + ' component'%>",
   "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
   "author": "codebender828 excellence@jbakebwa.dev",
   "license": "MIT",
   "scripts": {
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env swc src --out-dir dist/esm/",
-    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/"
+    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
   }
 }
diff --git a/index.ts b/index.ts
diff --git a/package.json b/package.json
@@ -10,29 +10,50 @@
   ],
   "scripts": {
     "build": "lerna run build",
-    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
+    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
+
+    "scaffold": "hygen",
+
+    "playground": "ts-node ./scripts/parse-routes.ts && vite serve playground",
+    "playground:build": "vite build",
+
+    "c-alert": "yarn workspace @chakra-ui/c-alert",
+    "c-box": "yarn workspace @chakra-ui/c-box",
+    "c-button": "yarn workspace @chakra-ui/c-button",
+    "nuxt": "yarn workspace @chakra-ui/nuxt-next"
   },
   "license": "MIT",
   "private": true,
   "devDependencies": {
     "@swc/cli": "^0.1.26",
     "@swc/core": "^1.2.28",
-    "@typescript-eslint/eslint-plugin": "^4.1.1",
-    "@typescript-eslint/parser": "^4.1.1",
+    "@types/recursive-readdir": "^2.2.0",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/parser": "^2.34.0",
+    "@vue/eslint-config-typescript": "^5.1.0",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.2",
-    "eslint": "^7.9.0",
+    "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^7.0.0",
+    "fs-extra": "^9.0.1",
+    "hygen": "^6.0.4",
     "lerna": "^3.22.1",
     "prettier": "^2.1.2",
+    "recursive-readdir": "^2.2.2",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.3",
     "vite": "^1.0.0-rc.4",
     "vue": "^3.0.0",
     "vue-router": "4.0.0-beta.10"
+  },
+  "dependencies": {
+    "change-case": "^4.1.1"
   }
 }
diff --git a/packages/c-alert/examples/base-alert.vue b/packages/c-alert/examples/base-alert.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    HELLO ALERT
+  </div>
+</template>
+
+<script lang="ts">
+import CAlert from '@chakra-ui/c-alert'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {}
+  }
+})
+</script>
diff --git a/packages/c-alert/package.json b/packages/c-alert/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@chakra-ui/c-alert",
+  "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 | CAlert component",
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
+  "author": "codebender828 excellence@jbakebwa.dev",
+  "license": "MIT",
+  "scripts": {
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env swc src --out-dir dist/esm/",
+    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+  }
+}
diff --git a/packages/c-alert/src/index.ts b/packages/c-alert/src/index.ts
@@ -0,0 +1,15 @@
+import { h, defineComponent, PropType } from 'vue'
+
+const CAlert = defineComponent({
+  props: {
+    as: {
+      type: String as PropType<string>,
+      default: 'div',
+    },
+  },
+  render() {
+    return h(this?.as, { ...this.$props, ...this.$attrs }, this.$slots.default)
+  },
+})
+
+export default CAlert
diff --git a/packages/c-alert/tests/c-alert.test.ts b/packages/c-alert/tests/c-alert.test.ts
@@ -0,0 +1,8 @@
+import { render } from '@chakra-ui/vue-test-utils'
+import CAlert from '../'
+
+
+it('should render properly', () => {
+  const { html } = render(CAlert)
+  expect(html()).toMatchSnapshot()
+})
diff --git a/packages/c-alert/tsconfig.json b/packages/c-alert/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}
diff --git a/packages/c-box/examples/base-box.vue b/packages/c-box/examples/base-box.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h2>Base Box</h2>
+    <p>{{ val }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import CBox from '@chakra-ui/c-box'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const val = ref('Hello box')
+    console.log('Base box setup ')
+    return {
+      val
+    }
+  }
+})
+</script>
diff --git a/packages/c-box/examples/box-with-chakra-directive.vue b/packages/c-box/examples/box-with-chakra-directive.vue
@@ -0,0 +1,16 @@
+<template>
+  <c-box>
+    Boxy box
+  </c-box>
+</template>
+
+<script lang="ts">
+import CBox from '@chakra-ui/c-box'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: {
+    CBox,
+  },
+})
+</script>
diff --git a/packages/c-box/package.json b/packages/c-box/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@chakra-ui/c-box",
+  "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 | CBox component",
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
+  "author": "codebender828 excellence@jbakebwa.dev",
+  "license": "MIT",
+  "scripts": {
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env swc src --out-dir dist/esm/",
+    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+  }
+}
diff --git a/packages/c-box/src/index.ts b/packages/c-box/src/index.ts
@@ -0,0 +1,15 @@
+import { h, defineComponent, PropType } from 'vue'
+
+const CBox = defineComponent({
+  props: {
+    as: {
+      type: String as PropType<string>,
+      default: 'div',
+    },
+  },
+  render() {
+    return h(this?.as, { ...this.$props, ...this.$attrs }, this.$slots)
+  },
+})
+
+export default CBox
diff --git a/packages/c-box/tests/c-box.test.ts b/packages/c-box/tests/c-box.test.ts
@@ -0,0 +1,8 @@
+import { render } from '@chakra-ui/vue-test-utils'
+import CBox from '../'
+
+
+it('should render properly', () => {
+  const { html } = render(CBox)
+  expect(html()).toMatchSnapshot()
+})
diff --git a/packages/c-box/tsconfig.json b/packages/c-box/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}
diff --git a/packages/c-button/examples/base-button.vue b/packages/c-button/examples/base-button.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+import CButton from '@chakra-ui/c-button'
+
+export default {
+  setup () {
+    
+
+    return {}
+  }
+}
+</script>
diff --git a/packages/c-button/package.json b/packages/c-button/package.json
@@ -1,14 +1,21 @@
 {
   "name": "@chakra-ui/c-button",
   "version": "1.0.0",
-  "main": "index.js",
+  "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 | CButton component",
   "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
   "author": "codebender828 excellence@jbakebwa.dev",
   "license": "MIT",
   "scripts": {
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env swc src --out-dir dist/esm/",
-    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/"
+    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
   }
 }
diff --git a/packages/c-button/src/index.ts b/packages/c-button/src/index.ts
@@ -1,14 +1,14 @@
-import { h, defineComponent } from 'vue'
+import { h, defineComponent, PropType } from 'vue'
 
 const CButton = defineComponent({
   props: {
     as: {
-      type: Object as PropType<string>,
+      type: String as PropType<string>,
       default: 'div',
     },
   },
-  setup(props, { slots, attrs }) {
-    return h(props?.as, { ...attrs }, slots.default?.())
+  render() {
+    return h(this?.as, { ...this.$props, ...this.$attrs }, this.$slots.default)
   },
 })
 
diff --git a/packages/c-button/tests/c-button.test.ts b/packages/c-button/tests/c-button.test.ts
@@ -1,5 +1,5 @@
 import { render } from '@chakra-ui/vue-test-utils'
-import CButton from '../'
+import CButton from '../src'
 
 
 it('should render properly', () => {
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -2,13 +2,20 @@
   "name": "@chakra-ui/vue-next",
   "version": "1.0.0",
   "description": "Vue 3 compatible version of Chakra UI Vue",
-  "main": "index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
   "author": "codebender828 excellence@jbakebwa.dev",
   "license": "MIT",
   "scripts": {
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env swc src --out-dir dist/esm/",
-    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/"
+    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
   }
 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,3 +1,3 @@
-const myName: string = 'Hello Jonas from `@chakra-ui/vue-next`'
+const myName = 'Hello Jonas from `@chakra-ui/vue-next`'
 
 export default myName
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
diff --git a/packages/nuxt/src/index.ts b/packages/nuxt/src/index.ts
diff --git a/packages/nuxt/tsconfig.json b/packages/nuxt/tsconfig.json
diff --git a/scripts/parse-routes.ts b/scripts/parse-routes.ts
diff --git a/scripts/recursive-readdir-sync.ts b/scripts/recursive-readdir-sync.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/vite.config.js b/vite.config.js
diff --git a/yarn.lock b/yarn.lock
