feat: resolve development packages first

Author: codebender828

.eslintrc.yml

@@ -6,7 +6,7 @@ extends:
   - prettier/@typescript-eslint
   - plugin:prettier/recommended
   - plugin:vue/essential
-  - '@vue/typescript/recommended'
+  - '@vue/typescript'
 parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaVersion: 12

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 playground/src/.generated/imports.js
-playground/src/.generated/routes.json
+playground/src/.generated/routes.json
+playground/src/.generated/resolver.js

packages/c-button/examples/base-button.vue

@@ -1,17 +1,17 @@
 <template>
   <div>
-
+    Base button ◻️
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import CButton from '@chakra-ui/c-button'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   setup () {
     
-
     return {}
   }
-}
+})
 </script>

playground/.DS_Store

@@ -1,18 +1,18 @@
 <template>
   <sidebar :stories="stories" />
-  <router-view />
+    <router-view />
 </template>
 
-<script lang="js">
+<script lang="ts">
 import { defineComponent } from 'vue'
 import Sidebar from './components/Sidebar.vue'
-import routes from './.generated/routes.json'
+import stories from './.generated/routes.json'
 
 export default defineComponent({
   components: { Sidebar },
   setup() {
     return {
-      stories: routes,
+      stories,
     }
   },
 })

playground/.gitignore

@@ -1,12 +1,12 @@
 <template>
-  <SideBar :stories="stories" />
+  <sideBar :stories="stories" />
 </template>
 
 <script>
 import { defineComponent, h } from 'vue'
-import SideBar from './Sidebar.vue'
 import { RouterLink } from 'vue-router'
-import routes from '../.generated/routes.json'
+import SideBar from './Sidebar.vue'
+            import routes from '../.generated/routes.json'
 
 
 export default defineComponent({

playground/src/App.vue

@@ -3,7 +3,7 @@ import lookup from './.generated/imports'
 import generatedRoutes from './.generated/routes.json'
 
 function buildRoutes(routes) {
-  return routes.map(route => {
+  return routes.map((route) => {
     const definition = {
       path: route.path,
       component: route.component ? lookup[route.component] : RouterView,
@@ -19,8 +19,6 @@ function buildRoutes(routes) {
 
 const routes = buildRoutes(generatedRoutes)
 
-console.group(routes)
-
 export default createRouter({
   history: createWebHistory(),
   routes,

playground/src/components/Home.vue

@@ -123,3 +123,14 @@ fs.writeFileSync(
     .join(',\n')}\n}`,
   'utf8'
 )
+
+fs.writeFileSync(
+  path.join(playgroundRoot, './.generated/resolver.js'),
+  `/* Package components resolver only used in development mode */
+    module.exports = {\n${baseRoutes
+      .map(
+        (pkg) => `  '@chakra-iu/${pkg}': '${packagesRoot}/${pkg}/src/index.ts'`
+      )
+      .join(',\n')}\n}`,
+  'utf8'
+)

playground/src/router.js

@@ -7,6 +7,7 @@
     // "incremental": true,                   /* Enable incremental compilation */
     "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "resolveJsonModule": true,
     "lib": [
       "es2019"
     ],