feat: 🎸 add sheikah -- resource management (#109)

package.json

@@ -62,8 +62,8 @@
         "vue-tsc": "0.32.1"
     },
     "dependencies": {
-        "cosmic-ui-alpha": "^0.0.16-alpha.9",
-        "cosmic-vue": "0.0.29-alpha.10",
+        "cosmic-ui-alpha": "^0.0.16-alpha.14",
+        "cosmic-vue": "0.0.30-alpha.0",
         "electron-updater": "4.6.5",
         "reflect-metadata": "^0.1.13",
         "resolve": "^1.22.0",

packages/core/browser/blueprint.vue

@@ -0,0 +1,6 @@
+<template>
+    <m-component
+        src="@cosmic-module/blueprint"
+        class="w-full h-full"
+    />
+</template>

packages/core/browser/index.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import urql from '@urql/vue';
+import urqlPlugin from '@urql/vue';
 
 import { gqlClientOptions }  from '@cosmic/core/parts';
 import { MComponent } from '@cosmic-module/core';
@@ -16,7 +16,7 @@ function bootstrap(option: BootstrapOption) {
     // eslint-disable-next-line vue/component-definition-name-casing
     app.component('m-component', MComponent);
     // gql
-    app.use(urql, gqlClientOptions);
+    app.use(urqlPlugin, gqlClientOptions);
     // router
     app.use(routify());
     // ioc container
@@ -28,5 +28,6 @@ function bootstrap(option: BootstrapOption) {
 
 export { bootstrap };
 
-export { interfaces as iocInterface, TOKENS as iocToken } from './ioc/index';
+export * as urql from '@urql/vue';
 export * as router from 'vue-router';
+export { default as lodash } from 'lodash';

packages/core/browser/ioc/config.ts

@@ -2,14 +2,17 @@ import type { interfaces} from 'inversify';
 import { Container  }  from 'inversify';
 import { TOKENS } from './token';
 
-import { gqlClient } from './entity/gql';
-
-import type { GqlClient } from './interfaces';
+import { gqlClient } from './gql';
+import type { GqlClient } from './gql';
 
 export function load(options: interfaces.ContainerOptions) {
     const container = new Container(options);
 
     // put all coupling loigc here
-    container.bind<GqlClient>(TOKENS.GqlClient).toConstantValue(gqlClient);
+    container.bind<GqlClient>(TOKENS.GqlClient).toFactory<GqlClient>(() => {
+        return () => {
+            return gqlClient;
+        };
+    });
     return container;
 }

packages/core/browser/ioc/gql.ts

@@ -0,0 +1,7 @@
+import * as urql from '@urql/vue';
+
+// API
+export const gqlClient = urql;
+
+// interface
+export type GqlClient = typeof gqlClient;

packages/core/browser/ioc/index.ts

@@ -2,9 +2,8 @@ import { load } from './config';
 
 import type { interfaces } from 'inversify';
 
-export * as interfaces from './interfaces';
 export { TOKENS } from './token';
-
+export * as gqlClient from './gql';
 
 export function createContainer(options: interfaces.ContainerOptions) {
     return load(options);

packages/core/browser/routes.ts

@@ -1,10 +1,27 @@
+import Blueprint from './blueprint.vue';
 import Workbench from './workbench.vue';
+import Sheika from './sheikah.vue';
 import { createRouter, createMemoryHistory } from 'vue-router';
 
 
 const routes = [{
-    path: '/',
+    name: 'sheikah',
+    path: '/sheikah',
+    component: Sheika,
+}, {
+    name: 'blueprint',
+    path: '/blueprint',
+    component: Blueprint,
+}, {
+    name: 'workbench',
+    path: '/workbench',
     component: Workbench,
+}, {
+    name: 'home',
+    path: '/',
+    redirect: () => {
+        return { name: 'sheikah' };
+    },
 }];
 
 export function routify() {

packages/core/browser/sheikah.vue

@@ -0,0 +1,6 @@
+<template>
+    <m-component
+        src="@cosmic-module/sheikah"
+        class="w-full h-full"
+    />
+</template>

packages/core/parts/ioc/inject.ts

@@ -2,10 +2,10 @@ import type { Container } from 'inversify';
 import { inject as injectVue } from 'vue';
 
 
-export function inject<T extends abstract new (...args: never) => unknown>(Token: T){
+export function inject<T extends abstract new (...args: any[]) => unknown>(Token: T){
     const container = injectVue('container') as Container;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const service = container.get(Token);
-    return service as T;
+    return service as InstanceType<T>;
 }
 

packages/core/parts/lib/gql/exchange/auth/user.ts

@@ -30,7 +30,7 @@ export function login({ username, password }: ILoginData) {
     }
     return axios
         .post<any, { data: { accessToken: string } }>(
-            'http://localhost:3000/auth/login',
+            'http://localhost:3001/auth/login',
             {
                 // TODO: password security, this is only a demo
                 username,

packages/core/parts/lib/gql/exchange/index.ts

@@ -1,6 +1,12 @@
 import { dedupExchange, fetchExchange } from '@urql/vue';
-import { authExchange } from './auth/index';
-import { subscriptionExchange } from './websocket/index';
-import { offlineExchange } from './offline/index';
+// import { authExchange } from './auth/index';
+// import { subscriptionExchange } from './websocket/index';
+// import { offlineExchange } from './offline/index';
 
-export const exchanges = [dedupExchange, offlineExchange, authExchange, fetchExchange, subscriptionExchange];
+export const exchanges = [
+    dedupExchange,
+    // offlineExchange,
+    // authExchange,
+    fetchExchange,
+    // subscriptionExchange,
+];

packages/core/parts/lib/gql/exchange/websocket/index.ts

@@ -12,7 +12,7 @@ export const subscriptionExchange = exchange({
             subscribe: sink => {
                 if (!wsClient) {
                     wsClient = createWSClient({
-                        url: 'ws://localhost:3000/api/graphql',
+                        url: 'ws://localhost:3001/api/graphql',
                         connectionParams: {
                             Authorization: `Bearer ${get().token}`,
                         },

packages/core/parts/lib/gql/index.ts

@@ -3,5 +3,5 @@ import { exchanges } from './exchange/index';
 
 export const gqlClientOptions = {
     exchanges,
-    url: 'http://localhost:3000/graphql',
+    url: 'http://localhost:3001/api/graphql',
 };

packages/module/app-bar/index.ts

@@ -1,9 +1,6 @@
 import type { Module } from '@cosmic/core/parts';
 import root from './src/app-bar.vue';
-import MenuService from './src/menu.service';
+
 export default {
   root,
-  providers: [ MenuService ],
 } as Module;
-
-export { MenuService };

packages/module/app-bar/src/app-bar.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { inject } from '@cosmic/core/parts';
 import { Button } from 'cosmic-vue';
-import MenuService from './menu.service';
 import ButtonStyle from './component/button/button.module.css';
+import { router } from '@cosmic/core/browser';
 
-const service = inject(MenuService);
 
-function onButtonClicked(index: number, title: string) {
-  service.selectTab(index, { title });
+const r = router.useRouter();
+
+function onButtonClicked(name: string) {
+    r.push({ name });
 }
 </script>
 
@@ -17,26 +17,27 @@ function onButtonClicked(index: number, title: string) {
         <Button
             class="menu-button"
             :styles="ButtonStyle"
-            @click="onButtonClicked(1, '文件')"
+            @click="onButtonClicked('sheikah')"
         >
             资产管理
         </Button>
         <Button
             class="menu-button"
             :styles="ButtonStyle"
-            @click="onButtonClicked(2, '编辑')"
+            @click="onButtonClicked('workbench')"
         >
             设计工具
         </Button>
         <Button
             class="menu-button"
             :styles="ButtonStyle"
-            @click="onButtonClicked(3, 'blueprint')"
+            @click="onButtonClicked('blueprint')"
         >
             Blueprint
         </Button>
     </div>
 </template>
+
 <style scoped>
 .container {
     display: flex;

packages/module/blueprint/components.d.ts

@@ -0,0 +1,12 @@
+// 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 {
+    EditableText: typeof import('./src/components/editable-text.vue')['default']
+    Properties: typeof import('./src/components/proposal/properties.vue')['default']
+  }
+}
+
+export { }

packages/module/core/src/m-component.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { inject, onMounted, ref, watch } from 'vue';
+import { inject, onMounted, ref, watch, getCurrentInstance } from 'vue';
 import { fetchModule, fetchStyle, bootstrapModule } from './module-util';
 
 import type { inversify } from '@cosmic/core/parts';
@@ -20,17 +20,28 @@ import type { inversify } from '@cosmic/core/parts';
             type: String,
             default: '',
         },
+        inherit: {
+            type: Array || Boolean,
+            default: true,
+        },
     });
     const root = ref();
     const cssPath = ref('');
 
+    function getRootProviders() {
+        return Reflect.ownKeys(getCurrentInstance()?.appContext.provides || {})
+            .filter((k: string | symbol) => typeof k !== 'symbol' || k.description?.indexOf('route') === -1).map(k => {
+            return { k, v: inject(k) };
+        });
+    }
+
     onMounted(() => {
         prop.css && fetchStyle(prop.src, cssPath);
-        fetchModule(prop.src).then(bootstrapModule(prop.src, root.value, container));
+        fetchModule(prop.src).then(bootstrapModule(prop.src, root.value, container, prop.inherit, getRootProviders()));
     });
     watch(() => prop.src, function(a) {
         prop.css && fetchStyle(prop.src, cssPath);
-        fetchModule(prop.src).then(bootstrapModule(prop.src, root.value, container));
+        fetchModule(prop.src).then(bootstrapModule(prop.src, root.value, container, prop.inherit, getRootProviders()));
     });
 
 </script>

packages/module/core/src/module-util.ts

@@ -1,9 +1,15 @@
-import type { Module, Container, inversify } from '@cosmic/core/parts';
+import type { Module, Container } from '@cosmic/core/parts';
 import { createApp } from 'vue';
-import type {Ref} from 'vue';
+import type { Ref, App } from 'vue';
 import { moduleAssetPath} from './loader';
 
-export function bootstrapModule(src: string, root: HTMLElement, container: Container) {
+export function bootstrapModule(
+    src: string,
+    root: HTMLElement,
+    container: Container,
+    inherit?: string[] | boolean,
+    rootProviders: any[],
+) {
     return async function(module: Module) {
         if (!root) return;
         if (module.imports) {
@@ -16,11 +22,26 @@ export function bootstrapModule(src: string, root: HTMLElement, container: Conta
         if (module.root) {
             const moduleApp = createApp(module.root);
             moduleApp.provide('container', container);
+            if (inherit) {
+                addInherit(moduleApp, inherit, rootProviders);
+            }
             moduleApp.mount(root);
         }
     };
 }
 
+function addInherit(moduleApp: App<Element>, inherit?: string[] | boolean, rootProviders: any[]) {
+    const filterList = inherit === true ? [] : (inherit || []);
+    filterList.push('container');
+    // TODO: extract it to an interface
+    // TODO: filter router key
+    rootProviders.forEach(ins => {
+        if (filterList.indexOf(ins.k) === -1) {
+            moduleApp.provide(ins.k, ins.v);
+        }
+    });
+}
+
 /** add providers to container */
 function addProviders(container: Container, providers: inversify.ServiceIdentifier[]){
     if (providers) {
@@ -81,4 +102,4 @@ export function fetchStyle(src: string, cssPath: Ref<string>) {
         const linkSrc = moduleAssetPath(src, 'index.css');
         if (linkSrc) cssPath.value = linkSrc;
     }
-}
+}