feat: add cosmic-icon (#100)

.eslintrc.json

@@ -21,7 +21,8 @@
   "ignorePatterns": [
     "packages/preload/exposedInMainWorld.d.ts",
     "node_modules/**",
-    "**/dist/**"
+    "**/dist/**",
+    "**/components.d.ts"
   ],
   "rules": {
     "@typescript-eslint/no-unused-vars": "error",

package.json

@@ -35,6 +35,7 @@
         "@typescript-eslint/parser": "^5.10.1",
         "@vitejs/plugin-vue": "2.1.0",
         "@vue/test-utils": "2.0.0-rc.18",
+        "cosmic-icon": "0.0.3-alpha.2",
         "cross-env": "7.0.3",
         "dts-for-context-bridge": "0.7.1",
         "electron": "16.0.7",
@@ -50,6 +51,8 @@
         "rimraf": "^3.0.2",
         "simple-git-hooks": "2.7.0",
         "typescript": "4.5.5",
+        "unplugin-icons": "^0.13.2",
+        "unplugin-vue-components": "^0.17.21",
         "vite": "2.7.13",
         "vite-dts": "^1.0.4",
         "vite-plugin-import-maps": "^0.1.2",

packages/core/browser/app.vue

@@ -8,7 +8,7 @@ const { Content, Footer, Header } = Layout;
   <Layout style="height: 100vh">
     <Header>
       <m-component
-        src="@cosmic-module/frame-menu-bar"
+        src="@cosmic-module/app-bar"
       />
     </Header>
     <Content>

packages/module/app-bar/components.d.ts

@@ -0,0 +1,11 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ICosmicCircles: typeof import('~icons/cosmic/circles')['default']
+  }
+}
+
+export { }

packages/module/frame-menu-bar/package.json → packages/module/app-bar/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@cosmic-module/frame-menu-bar",
+    "name": "@cosmic-module/app-bar",
     "version": "0.0.1",
     "main": "./dist/index.cjs",
     "module": "./dist/index.mjs",

packages/module/frame-menu-bar/src/menu-bar.vue → packages/module/app-bar/src/menu-bar.vue

@@ -12,6 +12,7 @@ function onButtonClicked(index: number, title: string) {
 
 <template>
   <div class="menu-container">
+    <i-cosmic-circles />
     <Button
       class="menu-button"
       c-style="./component/button/button.module.css"

packages/module/frame-workbench/components.d.ts

@@ -0,0 +1,13 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ICosmicAlign: typeof import('~icons/cosmic/align')['default']
+    ICosmicBoard: typeof import('~icons/cosmic/board')['default']
+    ICosmicCanvas: typeof import('~icons/cosmic/canvas')['default']
+  }
+}
+
+export { }

packages/module/frame-workbench/src/workbench.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref} from 'vue';
-import { MenuService } from '@cosmic-module/frame-menu-bar';
+import { MenuService } from '@cosmic-module/app-bar';
 import { inject } from '@cosmic/core/parts';
 
 const content = ref('');
@@ -17,6 +17,9 @@ onMounted(() => {
 <template>
   <div class="sworkbench">
     {{ content }}
+    <i-cosmic-align />
+    <i-cosmic-board />
+    <i-cosmic-canvas />
   </div>
 </template>
 <style scoped>

packages/module/vite.config.js

@@ -3,9 +3,15 @@
 import {chrome} from '../../.electron-vendors.cache.json';
 import {resolve, join} from 'path';
 import {builtinModules} from 'module';
+import { readdirSync, statSync } from 'fs-extra';
 import vue from '@vitejs/plugin-vue';
 import { cStyle } from 'cosmic-vue/plugin';
 
+import { cosmicCollectionFactory } from 'cosmic-icon';
+import IconsResolver from 'unplugin-icons/resolver';
+import Components from 'unplugin-vue-components/vite';
+import Icons from 'unplugin-icons/vite';
+
 export function genConfig(PACKAGE_ROOT) {
   return {
     mode: process.env.MODE,
@@ -16,7 +22,23 @@ export function genConfig(PACKAGE_ROOT) {
         '@cosmic-module/': join(PACKAGE_ROOT, '../') + '/',
       },
     },
-    plugins: [cStyle(), vue()],
+    plugins: [
+      cStyle(), vue(),
+      Icons({
+          compiler: 'vue3',
+          customCollections: {
+              ...cosmicCollectionFactory(),
+          },
+      }),
+      Components({
+          dts: true,
+          resolvers: [
+              IconsResolver({
+                  customCollections: ['cosmic'],
+              }),
+          ],
+      }),
+    ],
     base: '',
     server: {
       fs: {
@@ -53,8 +75,7 @@ export function genConfig(PACKAGE_ROOT) {
           'cosmic-vue',
           '@cosmic/core/browser',
           '@cosmic/core/parts',
-          '@cosmic-module/frame-menu-bar',
-          '@cosmic-module/frame-workbench',
+          ...listOfModule().map(m => `@cosmic-module/${m}`),
           ...builtinModules.flatMap(p => [p, `node:${p}`]),
         ],
       },
@@ -67,3 +88,16 @@ export function genConfig(PACKAGE_ROOT) {
   };
 }
 export default genConfig(process.cwd());
+
+
+// list.map(dir => resolve(ROOT, dir)).filter(dir => statSync(dir).isDirectory()).map(dir => {
+//   const output = execSync(`cd ${dir} && pnpm run build`, {
+//       encoding: 'utf-8',
+//   });
+//   console.log(output.toString());
+// });
+
+export function listOfModule() {
+  const list = readdirSync(resolve(__dirname, '../module')).filter(dir => statSync(resolve(__dirname, dir)).isDirectory());
+  return list;
+}

packages/site/vite.config.js

@@ -1,5 +1,5 @@
 /* eslint-env node */
-
+import { listOfModule } from '../module/vite.config';
 import {chrome} from '../../.electron-vendors.cache.json';
 import {join, resolve, sep} from 'path';
 import {builtinModules} from 'module';
@@ -16,6 +16,15 @@ function resolveLib(pkg) {
   const libPath = sync(pkg);
   return APP_ROOT + libPath.replace(resolve(PACKAGE_ROOT, '../../') + sep, '');
 }
+
+function moduleImports() {
+  const imps = {};
+  listOfModule().forEach(m => {
+    imps[`@cosmic-module/${m}`] = `${APP_ROOT}packages/module/${m}/dist/index.mjs`;
+  });
+  return imps;
+}
+
 /**
  * @type {import('vite').UserConfig}
  * @see https://vitejs.dev/config/
@@ -34,11 +43,7 @@ const config = {
       imports: {
         '@cosmic/core/browser':  APP_ROOT + 'packages/core/dist/browser.mjs',
         '@cosmic/core/parts':  APP_ROOT + 'packages/core/dist/parts.mjs',
-        '@cosmic-module/core': APP_ROOT + 'packages/module/core/dist/index.mjs',
-        '@cosmic-module/frame-menu-bar': APP_ROOT + 'packages/module/frame-menu-bar/dist/index.mjs',
-        '@cosmic-module/frame-workbench': APP_ROOT + 'packages/module/frame-workbench/dist/index.mjs',
-        '@cosmic-module/frame-menu-bar/': APP_ROOT + 'packages/module/frame-menu-bar/dist/',
-        '@cosmic-module/frame-workbench/': APP_ROOT + 'packages/module/frame-workbench/dist/',
+        ...moduleImports(),
         ...development? {} :{ 
           'cosmic-vue': resolveLib('cosmic-vue/dist/index.es.js'),
           'vue': resolveLib('vue/dist/vue.runtime.esm-browser.prod'),