basic gql (#105)

* feat: 🎸 gql and net lib

* feat: 🎸 add gql

.eslintignore

@@ -0,0 +1 @@
+**/*/graphql.d.ts

.eslintrc.json

@@ -8,7 +8,8 @@
   "extends": [
     "eslint:recommended",
     /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:vue/vue3-recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -28,6 +29,7 @@
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/consistent-type-imports": "error",
+    "vue/html-indent": [1, 4],
 
   /**
    * Having a semicolon helps the optimizer interpret your code correctly.

.nvmrc

@@ -0,0 +1 @@
+lts/*

package.json

@@ -46,6 +46,7 @@
         "eslint-plugin-vue": "8.3.0",
         "fs-extra": "^10.0.0",
         "git-cz": "~4.8.0",
+        "graphql": "~16.3.0",
         "happy-dom": "2.30.1",
         "nano-staged": "0.5.0",
         "playwright": "1.18.0",
@@ -61,10 +62,9 @@
         "vue-tsc": "0.32.1"
     },
     "dependencies": {
-        "cosmic-ui-alpha": "^0.0.15",
-        "cosmic-vue": "0.0.28",
+        "cosmic-ui-alpha": "^0.0.16-alpha.4",
+        "cosmic-vue": "0.0.29-alpha.2",
         "electron-updater": "4.6.5",
-        "inversify": "^6.0.1",
         "reflect-metadata": "^0.1.13",
         "resolve": "^1.22.0",
         "vue": "3.2.29"

packages/core/browser/app.vue

@@ -1,39 +1,33 @@
 <script lang="ts" setup>
-import Layout from './component/layout';
+import { Layout } from 'cosmic-vue';
+
+
 const { Content, Footer, Header } = Layout;
 
 </script>
 
 <template>
-  <Layout style="height: 100vh">
-    <Header>
-      <m-component
-        src="@cosmic-module/app-bar"
-        class="w-full"
-      />
-    </Header>
-    <Content>
-      <Layout>
-        <!-- put siders here -->
-        <Layout>
-          <Content>
+    <Layout style="height: 100vh">
+        <Header>
             <m-component
-              src="@cosmic-module/frame-workbench"
-              class="w-full"
+                src="@cosmic-module/app-bar"
+                class="w-full"
             />
-          </Content>
-        </Layout>
-      </Layout>
-    </Content>
-    <Footer>
-      this is the footer
-    </Footer>
-  </Layout>
+        </Header>
+        <Content>
+        <!-- <m-component
+            src="@cosmic-module/resource-explorer"
+            class="w-full h-full"
+        /> -->
+        </Content>
+        <Footer>
+            this is the footer
+        </Footer>
+    </Layout>
 </template>
 
 <style>
 @import 'cosmic-ui/ui.css';
-@import 'cosmic-vue/style.css';
 /* * {
     margin: 0;
     padding: 0;
@@ -46,6 +40,9 @@ body {
     margin: 0;
 }
 .w-full {
-  width: 100%;
+    width: 100%;
+}
+.h-full {
+    height: 100%;
 }
 </style>

packages/core/browser/index.ts

@@ -1,18 +1,26 @@
-import {createApp} from 'vue';
-import type { BootstrapOption } from '@cosmic/core/parts';
+import { createApp } from 'vue';
+import urql from '@urql/vue';
+import { gqlClientOptions }  from '@cosmic/core/parts';
 import { MComponent } from '@cosmic-module/core';
 
 import { createContainer } from './ioc/index';
 import App from './app.vue';
 
+import type { BootstrapOption } from '@cosmic/core/parts';
+
+
 function bootstrap(option: BootstrapOption) {
-    const app = createApp(App);
     const container = createContainer({ defaultScope: 'Singleton' });
+    const app = createApp(App);
+
     // eslint-disable-next-line vue/component-definition-name-casing
     app.component('m-component', MComponent);
+    app.use(urql, gqlClientOptions);
     app.provide('container', container);
     app.mount(option.root);
 
 }
 
 export { bootstrap };
+
+export { interfaces as iocInterface, TOKENS as iocToken } from './ioc/index';

packages/core/browser/ioc/config.ts

@@ -1,18 +1,15 @@
-import { Container }  from '@cosmic/core/parts';
+import type { interfaces} from 'inversify';
+import { Container  }  from 'inversify';
 import { TOKENS } from './token';
 
+import { gqlClient } from './entity/gql';
 
-import type { interfaces } from '@cosmic/core/parts';
-import type { GqlClient, GqlClientProvider } from './interfaces';
+import type { GqlClient } from './interfaces';
 
 export function load(options: interfaces.ContainerOptions) {
     const container = new Container(options);
 
     // put all coupling loigc here
-    container.bind<GqlClientProvider>(TOKENS.GqlClient).toProvider<GqlClient>(() => {
-        return () => {
-            return Promise.resolve({ useQuery: () => 0 });
-        };
-    });
+    container.bind<GqlClient>(TOKENS.GqlClient).toConstantValue(gqlClient);
     return container;
 }

packages/core/browser/ioc/entity/gql.ts

@@ -0,0 +1 @@
+export * as gqlClient from '@urql/vue';

packages/core/browser/ioc/index.ts

@@ -1,9 +1,9 @@
 import { load } from './config';
 
-import type { interfaces } from '@cosmic/core/parts';
+import type { interfaces } from 'inversify';
 
-export * from './interfaces';
-export * from './token';
+export * as interfaces from './interfaces';
+export { TOKENS } from './token';
 
 
 export function createContainer(options: interfaces.ContainerOptions) {

packages/core/browser/ioc/interfaces.ts

@@ -1,5 +1,3 @@
-export interface GqlClient {
-    useQuery: () => void;
-}
+import type { gqlClient } from './entity/gql';
 
-export type GqlClientProvider = () => Promise<GqlClient>;
+export type GqlClient = typeof gqlClient;

packages/core/package.json

@@ -2,18 +2,36 @@
     "name": "@cosmic/core",
     "version": "0.0.1",
     "exports": {
-        "./browser": "./dist/browser.mjs",
-        "./parts": "./dist/parts.mjs"
+        "./browser": {
+            "import": "./dist/es/browser.mjs",
+            "require": "./dist/cjs/browser.cjs"
+        },
+        "./parts": {
+            "import": "./dist/es/parts.mjs",
+            "require": "./dist/cjs/parts.cjs"
+        },
+        "./browser.css": {
+            "import": "./dist/es/browser.css",
+            "require": "./dist/cjs/browser.css"
+        }
     },
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.mjs",
+    "main": "./dist/cjx/index.cjs",
+    "module": "./dist/es/index.mjs",
     "scripts": {
-        "build": "vite build",
+        "build": "npm run clean & vite build",
         "clean": "rimraf dist"
     },
-    "devDependencies": {
-    },
     "dependencies": {
-        "inversify": "^6.0.1"
+        "@urql/core": "~2.4.3",
+        "@urql/exchange-auth": "~0.1.7",
+        "@urql/exchange-graphcache": "~4.3.6",
+        "@urql/vue": "~0.6.1",
+        "axios": "~0.26.1",
+        "graphql-ws": "~5.6.2",
+        "inversify": "^6.0.1",
+        "lodash": "~4.17.21"
+    },
+    "devDependencies": {
+        "@types/lodash": "~4.14.179"
     }
 }

packages/core/parts/index.ts

@@ -1,5 +1,8 @@
 export * from './ioc/inject';
 export * from './types';
 export * from './lib/observable';
+export * from './lib/gql/index';
 
-export { Container, injectable, interfaces } from 'inversify';
+import { Container, inject, injectable } from 'inversify';
+
+export const inversify = { Container, inject, injectable };

packages/core/parts/ioc/inject.ts

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

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

@@ -0,0 +1,75 @@
+/**
+ * @author zfy<biyingshuai@gmail.com>
+ * @description auth token
+ */
+ import { makeOperation } from '@urql/vue';
+ import type { Operation, CombinedError, OperationType, OperationContext } from '@urql/vue';
+ import { logout, get } from './user';
+
+ interface IAuthState {
+     accessToken?: string;
+ }
+
+ interface AddParams {
+     authState: IAuthState | null;
+     operation: Operation;
+ }
+
+ interface GetParams {
+     authState: IAuthState | null;
+     operation?: Operation | null;
+ }
+
+ export function addAuthToOperation(params: AddParams) {
+     const { authState, operation } = params || {};
+     const fetchOptions = operation?.context?.fetchOptions;
+     if (!authState || !authState.accessToken) {
+         return operation;
+     }
+     if (!operation) {
+         throw Error('runtime error');
+     }
+     const { kind, context } = operation;
+     if (!kind || !context) {
+         throw Error('runtime error');
+     }
+
+     const options = typeof fetchOptions === 'function' ? fetchOptions() : fetchOptions || {};
+
+     return makeOperation(kind as OperationType, operation, {
+         ...context,
+         fetchOptions: {
+             ...options,
+             headers: {
+                 ...options.headers,
+                 Authorization: `Bearer ${authState.accessToken}`,
+             },
+         },
+     } as OperationContext);
+ }
+
+ export async function getAuth(params: GetParams) {
+     const { authState } = params;
+     if (!authState) {
+         const accessToken = get().token;
+         if (accessToken) {
+             return { accessToken };
+         }
+         // logout();
+         // return null;
+     }
+     logout();
+     return null;
+ }
+
+ export const didAuthError = ({ error }: { error: CombinedError }) => {
+     return error.graphQLErrors.some(e => e.extensions?.code === 'UNAUTHENTICATED');
+ };
+
+ export function willAuthError({ authState }: GetParams) {
+     if (!authState || !authState.accessToken) {
+         return true;
+     }
+     // TODO: check expires
+     return false;
+ }

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

@@ -0,0 +1,10 @@
+import { authExchange as exchange } from '@urql/exchange-auth';
+import { getAuth, addAuthToOperation, willAuthError, didAuthError } from './auth';
+
+// TODO: 所有模块取拿token通过user.ts
+export const authExchange = exchange({
+    getAuth,
+    addAuthToOperation,
+    willAuthError,
+    didAuthError,
+});