Ssg (#468)

Feature: Replaced router and tested cypress against local dershop pkg #9

.github/workflows/node.js.yml

@@ -36,10 +36,9 @@ jobs:
           yarn build
           yarn bs
           node ./utils/hoistPackagesForDeployment.js
-          API_ORIGIN=http://localhost:3000 yarn --cwd packages/auth corejam static
         env: # Or as an environment variable
           GITHUB_SHA: ${{ github.sha }}
-      - run: tar -czf artifact.tar node_modules examples/nextjs packages/cli/dist packages/run/web-components packages/rollup-plugin/dist packages/notify/dist packages/base/dist packages/auth/dist packages/auth/www packages/dershop/dist packages/canvas/dist packages/core-components/node_modules
+      - run: tar -czf artifact.tar node_modules packages examples/nextjs
       - uses: actions/upload-artifact@v2
         with:
           name: dist
@@ -124,6 +123,7 @@ jobs:
           steps.cache-cypress.outputs.cache-hit != 'true'
       - run: |
           cd packages/auth
+          API_ORIGIN=http://localhost:3000 yarn static -l
           JWT_HASH=test FAKER_MODULE=auth DEPLOYMENT_URL=http://localhost:3000 nohup yarn static:serve & cd ../../test/cypress
           cypress run --spec "./cypress/integration/plugins/auth/**/*"
         env:
@@ -135,6 +135,45 @@ jobs:
           name: cypress-screenshots
           path: test/cypress/cypress/screenshots
 
+  cypress-static-plugin-dershop:
+    runs-on: ubuntu-20.04
+    container:
+      image: "corejam/cypress:6.5.0"
+      options: --ipc=host
+    needs: build
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          path: ""
+      - uses: actions/download-artifact@v2
+        with:
+          name: dist
+      - run: tar -xzf artifact.tar
+      - run: chmod +x node_modules/.bin/corejam
+      - name: Cache Cypress
+        id: cache-cypress
+        uses: actions/cache@v2
+        with:
+          path: test/cypress/node_modules
+          key: ${{ runner.os }}-${{ matrix.node-version }}-cache-cypress-${{ hashFiles('test/cypress/yarn.lock') }}
+      - run: yarn --cwd test/cypress --frozen-lockfile
+        if: |
+          steps.cache-cypress.outputs.cache-hit != 'true'
+      - run: |
+          cd packages/dershop
+          yarn corejam generateSchema && yarn corejam bootstrap
+          API_ORIGIN=http://localhost:3000 yarn static -l
+          JWT_HASH=test FAKER_MODULE=auth DEPLOYMENT_URL=http://localhost:3000 nohup yarn static:serve & cd ../../test/cypress
+          cypress run --spec "./cypress/integration/plugins/dershop/**/*"
+        env:
+          CYPRESS_baseUrl: "http://localhost:3001"
+          CYPRESS_CACHE_FOLDER: "/root/.cache/Cypress"
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: test/cypress/cypress/screenshots
+
   cypress-generateApp-monorepo:
     runs-on: ubuntu-20.04
     container:

packages/auth/app/layout/layout.tsx → packages/auth/app/app.tsx

@@ -1,15 +1,15 @@
 import { Component, Fragment, h } from "@stencil/core";
 
 @Component({
-  tag: "auth-layout",
+  tag: "auth-app",
 })
 export class AuthLayout {
   render() {
     return (
       <Fragment>
         <corejam-ui-base></corejam-ui-base>
         <auth-header></auth-header>
-        <slot></slot>
+        <corejam-app />
       </Fragment>
     );
   }

packages/auth/app/components.d.ts

@@ -16,6 +16,8 @@ export namespace Components {
         "data": any;
         "page": number;
     }
+    interface AuthApp {
+    }
     interface AuthFormLogin {
         "onFail": Function;
         "onSuccess": Function;
@@ -26,8 +28,6 @@ export namespace Components {
     }
     interface AuthHeader {
     }
-    interface AuthLayout {
-    }
     interface AuthReset {
     }
     interface AuthResetPasswordForm {
@@ -80,6 +80,12 @@ declare global {
         prototype: HTMLAuthAdminUserListElement;
         new (): HTMLAuthAdminUserListElement;
     };
+    interface HTMLAuthAppElement extends Components.AuthApp, HTMLStencilElement {
+    }
+    var HTMLAuthAppElement: {
+        prototype: HTMLAuthAppElement;
+        new (): HTMLAuthAppElement;
+    };
     interface HTMLAuthFormLoginElement extends Components.AuthFormLogin, HTMLStencilElement {
     }
     var HTMLAuthFormLoginElement: {
@@ -98,12 +104,6 @@ declare global {
         prototype: HTMLAuthHeaderElement;
         new (): HTMLAuthHeaderElement;
     };
-    interface HTMLAuthLayoutElement extends Components.AuthLayout, HTMLStencilElement {
-    }
-    var HTMLAuthLayoutElement: {
-        prototype: HTMLAuthLayoutElement;
-        new (): HTMLAuthLayoutElement;
-    };
     interface HTMLAuthResetElement extends Components.AuthReset, HTMLStencilElement {
     }
     var HTMLAuthResetElement: {
@@ -192,10 +192,10 @@ declare global {
         "auth-account": HTMLAuthAccountElement;
         "auth-admin-user-form": HTMLAuthAdminUserFormElement;
         "auth-admin-user-list": HTMLAuthAdminUserListElement;
+        "auth-app": HTMLAuthAppElement;
         "auth-form-login": HTMLAuthFormLoginElement;
         "auth-form-register": HTMLAuthFormRegisterElement;
         "auth-header": HTMLAuthHeaderElement;
-        "auth-layout": HTMLAuthLayoutElement;
         "auth-reset": HTMLAuthResetElement;
         "auth-reset-password-form": HTMLAuthResetPasswordFormElement;
         "auth-route-account": HTMLAuthRouteAccountElement;
@@ -223,6 +223,8 @@ declare namespace LocalJSX {
         "data"?: any;
         "page"?: number;
     }
+    interface AuthApp {
+    }
     interface AuthFormLogin {
         "onFail"?: Function;
         "onSuccess"?: Function;
@@ -233,8 +235,6 @@ declare namespace LocalJSX {
     }
     interface AuthHeader {
     }
-    interface AuthLayout {
-    }
     interface AuthReset {
     }
     interface AuthResetPasswordForm {
@@ -271,10 +271,10 @@ declare namespace LocalJSX {
         "auth-account": AuthAccount;
         "auth-admin-user-form": AuthAdminUserForm;
         "auth-admin-user-list": AuthAdminUserList;
+        "auth-app": AuthApp;
         "auth-form-login": AuthFormLogin;
         "auth-form-register": AuthFormRegister;
         "auth-header": AuthHeader;
-        "auth-layout": AuthLayout;
         "auth-reset": AuthReset;
         "auth-reset-password-form": AuthResetPasswordForm;
         "auth-route-account": AuthRouteAccount;
@@ -298,10 +298,10 @@ declare module "@stencil/core" {
             "auth-account": LocalJSX.AuthAccount & JSXBase.HTMLAttributes<HTMLAuthAccountElement>;
             "auth-admin-user-form": LocalJSX.AuthAdminUserForm & JSXBase.HTMLAttributes<HTMLAuthAdminUserFormElement>;
             "auth-admin-user-list": LocalJSX.AuthAdminUserList & JSXBase.HTMLAttributes<HTMLAuthAdminUserListElement>;
+            "auth-app": LocalJSX.AuthApp & JSXBase.HTMLAttributes<HTMLAuthAppElement>;
             "auth-form-login": LocalJSX.AuthFormLogin & JSXBase.HTMLAttributes<HTMLAuthFormLoginElement>;
             "auth-form-register": LocalJSX.AuthFormRegister & JSXBase.HTMLAttributes<HTMLAuthFormRegisterElement>;
             "auth-header": LocalJSX.AuthHeader & JSXBase.HTMLAttributes<HTMLAuthHeaderElement>;
-            "auth-layout": LocalJSX.AuthLayout & JSXBase.HTMLAttributes<HTMLAuthLayoutElement>;
             "auth-reset": LocalJSX.AuthReset & JSXBase.HTMLAttributes<HTMLAuthResetElement>;
             "auth-reset-password-form": LocalJSX.AuthResetPasswordForm & JSXBase.HTMLAttributes<HTMLAuthResetPasswordFormElement>;
             "auth-route-account": LocalJSX.AuthRouteAccount & JSXBase.HTMLAttributes<HTMLAuthRouteAccountElement>;

packages/auth/app/components/Identity/corejam-identity.tsx

@@ -1,5 +1,5 @@
 import { coreState } from "@corejam/core-components";
-import { runState } from "@corejam/run";
+import { routerState } from "@corejam/run";
 import { Component, Element, h, Host, Listen, Prop, State } from "@stencil/core";
 import gql from "graphql-tag";
 import { userAuthenticateMutationGQL } from "../../../shared/graphql/Mutations";
@@ -78,7 +78,7 @@ export class CorejamIdentity {
     if (request.data.userAuthenticate) {
       this.toggleMenu();
       authStore.identity = request.data.userAuthenticate;
-      runState.router.push("/");
+      routerState.router.push("/");
     }
   }
 

packages/auth/app/components/LoginForm/LoginForm.tsx

@@ -1,5 +1,5 @@
 import { coreState } from "@corejam/core-components";
-import { runState } from "@corejam/run";
+import { routerState } from "@corejam/run";
 import { Component, h, Host, Listen, Prop } from "@stencil/core";
 import gql from "graphql-tag";
 import { userAuthenticateMutationGQL } from "../../../shared/graphql/Mutations";
@@ -15,7 +15,7 @@ export class LoginForm {
   @Prop() onFail: Function;
 
   componentWillLoad() {
-    if (authStore.identity) runState.router.push("/");
+    if (authStore.identity) routerState.router.push("/");
   }
 
   @Listen("sendForm", { target: "window" })
@@ -32,7 +32,7 @@ export class LoginForm {
 
     if (request.data.userAuthenticate) {
       authStore.identity = request.data.userAuthenticate;
-      this.onSuccess ? this.onSuccess() : runState.router.push("/");
+      this.onSuccess ? this.onSuccess() : routerState.router.push("/");
     } else {
       this.onFail ? this.onFail() : null;
     }

packages/auth/app/components/RegisterForm/RegisterForm.tsx

@@ -1,5 +1,5 @@
 import { coreState } from "@corejam/core-components";
-import { runState } from "@corejam/run";
+import { routerState } from "@corejam/run";
 import { Component, h, Host, Listen, Prop } from "@stencil/core";
 import gql from "graphql-tag";
 import { userRegisterMutationGQL } from "../../../shared/graphql/Mutations";
@@ -30,14 +30,14 @@ export class RegisterForm {
     });
 
     if (request.data.userRegister) {
-      this.onSuccess ? this.onSuccess() : runState.router.push("/login");
+      this.onSuccess ? this.onSuccess() : routerState.router.push("/login");
     } else {
       this.onFail ? this.onFail() : null;
     }
   }
 
   componentWillLoad() {
-    if (authStore.identity) runState.router.push("/");
+    if (authStore.identity) routerState.router.push("/");
   }
 
   render() {

packages/auth/app/components/ResetForm/auth-reset-form.tsx

@@ -1,5 +1,5 @@
 import { coreState } from "@corejam/core-components";
-import { runState } from "@corejam/run";
+import { routerState } from "@corejam/run";
 import { Component, Fragment, h, Host, Listen, State } from "@stencil/core";
 import gql from "graphql-tag";
 import { passwordResetGQL, requestPasswordResetGQL } from "../../../shared/graphql/Mutations";
@@ -69,7 +69,7 @@ export class Reset {
 
     if (request.data.userResetPassword) {
       this.resetCompleted = true;
-      runState.router.push("/login");
+      routerState.router.push("/login");
     }
   }
 

packages/auth/app/index.html

@@ -7,6 +7,6 @@
     <script nomodule src="/build/corejam-plugin-auth.js"></script>
   </head>
   <body>
-    <corejam-app></corejam-app>
+    <auth-app></auth-app>
   </body>
 </html>

packages/canvas/app/components/corejam-deploy/corejam-deploy.tsx

@@ -1,5 +1,5 @@
 import { coreState } from "@corejam/core-components";
-import { runState } from "@corejam/run";
+import { routerState, runState } from "@corejam/run";
 import { Component, h, Host } from "@stencil/core";
 import gql from "graphql-tag";
 import { PostCanvasGQL } from "../../../shared/graphql/Mutations";
@@ -39,7 +39,7 @@ export class CorejamDeploy {
           },
         ];
 
-        runState.router.push(`/${name}`);
+        routerState.router.push(`/${name}`);
       }
     }
   }

packages/cli/src/commands/dev.ts

@@ -18,7 +18,9 @@ export default async function run(options: any) {
 
     const logToConsole = options.l ? "inherit" : "ignore";
 
-    await jetpack.removeAsync(envRoot + "/.corejam");
+    //Refresh manifest & schema
+    await jetpack.removeAsync(envRoot + "/.corejam/manifest.json");
+    await jetpack.removeAsync(envRoot + "/.corejam/schema.graphql");
 
     if (await jetpack.existsAsync(envRoot + "/server")) {
       await copySchemaToDist();

packages/core-components/app/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import { Build, Component, Element, h, Host, Prop, State } from "@stencil/core";
+import { Build, Component, Element, h, Prop, State } from "@stencil/core";
 
 @Component({
   tag: "corejam-image",
@@ -21,11 +21,7 @@ export class Image {
   componentDidLoad() {
     if (Build.isBrowser && this.lazy) this.setupObserver();
   }
-  async componentWillLoad() {
-    await this.computeStyles();
-  }
-
-  async computeStyles() {
+  async componentWillRender() {
     const hash = await (await import("../../utils/style")).calculateStyles(this);
     this.hash = hash;
   }
@@ -52,15 +48,9 @@ export class Image {
     }
   };
 
-  _relevantProps = ["w", "maxWidth", "h", "maxH", "fit", "rounded"];
-
   render() {
     const srcProps = {};
     this.lazy ? (srcProps["data-src"] = this.src) : (srcProps["src"] = this.src);
-    return (
-      <Host as="image" alt={this.alt}>
-        <img {...srcProps} alt={this.alt} class={this.hash} />
-      </Host>
-    );
+    return <img {...srcProps} alt={this.alt} class={this.hash} />;
   }
 }