From 4f5a7bc5ee519ad292f2d26546f1f77774701bbf Mon Sep 17 00:00:00 2001 From: Patrick Haug Date: Thu, 11 Mar 2021 16:00:23 +0100 Subject: [PATCH] Ssg (#468) Feature: Replaced router and tested cypress against local dershop pkg #9 --- .github/workflows/node.js.yml | 43 ++++++++- .../auth/app/{layout/layout.tsx => app.tsx} | 4 +- packages/auth/app/components.d.ts | 26 +++--- .../components/Identity/corejam-identity.tsx | 4 +- .../app/components/LoginForm/LoginForm.tsx | 6 +- .../components/RegisterForm/RegisterForm.tsx | 6 +- .../components/ResetForm/auth-reset-form.tsx | 4 +- packages/auth/app/index.html | 2 +- packages/auth/app/layout/readme.md | 40 -------- .../corejam-deploy/corejam-deploy.tsx | 4 +- packages/cli/src/commands/dev.ts | 4 +- .../app/components/Image/Image.tsx | 16 +--- .../app/components/Init/Init.tsx | 14 +-- .../app/components/Link/Link.tsx | 44 +++------ .../app/{layout/layout.tsx => app.tsx} | 4 +- packages/dershop/app/components.d.ts | 93 ++++++++++++------- .../dershop-cart-mini/dershop-cart-mini.css | 27 ------ .../dershop-cart-mini/dershop-cart-mini.tsx | 1 - .../components/dershop-cart/dershop-cart.tsx | 4 +- .../dershop-form-register.tsx | 6 +- .../app/components/dershop-header/header.css | 4 - .../dershop-image/dershop-image.css | 9 -- .../dershop-image/dershop-image.tsx | 37 -------- .../app/components/dershop-image/readme.md | 33 ------- .../dershop-inline-search.tsx | 4 +- .../dershop-product-box/product-box.css | 8 -- .../dershop-product-list/product-list.css | 4 - .../dershop-product-list/product-list.tsx | 1 - .../dershop-spotlight/dershop-spotlight.css | 3 - .../dershop-testimonial/testimonial.css | 3 - .../dershop-testimonial/testimonial.tsx | 1 - .../app/components/product/product.tsx | 9 +- packages/dershop/app/index.html | 2 +- packages/dershop/app/layout/readme.md | 58 ------------ packages/dershop/app/routes/[url].tsx | 4 +- packages/dershop/app/routes/admin/orders.tsx | 16 ++++ packages/dershop/app/routes/admin/users.tsx | 16 ++++ .../app/routes/admin/users/edit/[page].tsx | 16 ++++ packages/dershop/package.json | 2 +- packages/dershop/prerender.config.ts | 13 +++ packages/dershop/shared/machines/basket.ts | 4 +- packages/dershop/stencil.config.ts | 2 + packages/rollup-plugin/src/index.ts | 1 + packages/run/app/components/Router/Router.tsx | 87 ++++++++--------- .../run/app/components/Welcome/Welcome.tsx | 9 +- packages/run/app/index.ts | 4 +- packages/run/app/store/index.ts | 2 + packages/run/app/store/routerStore.ts | 23 +++++ packages/run/app/store/runStore.ts | 21 +---- packages/run/app/store/types.ts | 8 ++ packages/run/package.json | 4 +- yarn.lock | 7 ++ 52 files changed, 325 insertions(+), 442 deletions(-) rename packages/auth/app/{layout/layout.tsx => app.tsx} (85%) delete mode 100644 packages/auth/app/layout/readme.md rename packages/dershop/app/{layout/layout.tsx => app.tsx} (86%) delete mode 100644 packages/dershop/app/components/dershop-cart-mini/dershop-cart-mini.css delete mode 100644 packages/dershop/app/components/dershop-header/header.css delete mode 100644 packages/dershop/app/components/dershop-image/dershop-image.css delete mode 100644 packages/dershop/app/components/dershop-image/dershop-image.tsx delete mode 100644 packages/dershop/app/components/dershop-image/readme.md delete mode 100644 packages/dershop/app/components/dershop-product-box/product-box.css delete mode 100644 packages/dershop/app/components/dershop-product-list/product-list.css delete mode 100644 packages/dershop/app/components/dershop-spotlight/dershop-spotlight.css delete mode 100644 packages/dershop/app/components/dershop-testimonial/testimonial.css delete mode 100644 packages/dershop/app/layout/readme.md create mode 100644 packages/dershop/app/routes/admin/orders.tsx create mode 100644 packages/dershop/app/routes/admin/users.tsx create mode 100644 packages/dershop/app/routes/admin/users/edit/[page].tsx create mode 100644 packages/dershop/prerender.config.ts create mode 100644 packages/run/app/store/index.ts create mode 100644 packages/run/app/store/routerStore.ts create mode 100644 packages/run/app/store/types.ts diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index cc4151e6f..7bc6cb0cf 100644 --- a/.github/workflows/node.js.yml +++ b/.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: diff --git a/packages/auth/app/layout/layout.tsx b/packages/auth/app/app.tsx similarity index 85% rename from packages/auth/app/layout/layout.tsx rename to packages/auth/app/app.tsx index ffcf6f2c5..134f9b914 100644 --- a/packages/auth/app/layout/layout.tsx +++ b/packages/auth/app/app.tsx @@ -1,7 +1,7 @@ import { Component, Fragment, h } from "@stencil/core"; @Component({ - tag: "auth-layout", + tag: "auth-app", }) export class AuthLayout { render() { @@ -9,7 +9,7 @@ export class AuthLayout { - + ); } diff --git a/packages/auth/app/components.d.ts b/packages/auth/app/components.d.ts index d34c55b45..65d565830 100644 --- a/packages/auth/app/components.d.ts +++ b/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; "auth-admin-user-form": LocalJSX.AuthAdminUserForm & JSXBase.HTMLAttributes; "auth-admin-user-list": LocalJSX.AuthAdminUserList & JSXBase.HTMLAttributes; + "auth-app": LocalJSX.AuthApp & JSXBase.HTMLAttributes; "auth-form-login": LocalJSX.AuthFormLogin & JSXBase.HTMLAttributes; "auth-form-register": LocalJSX.AuthFormRegister & JSXBase.HTMLAttributes; "auth-header": LocalJSX.AuthHeader & JSXBase.HTMLAttributes; - "auth-layout": LocalJSX.AuthLayout & JSXBase.HTMLAttributes; "auth-reset": LocalJSX.AuthReset & JSXBase.HTMLAttributes; "auth-reset-password-form": LocalJSX.AuthResetPasswordForm & JSXBase.HTMLAttributes; "auth-route-account": LocalJSX.AuthRouteAccount & JSXBase.HTMLAttributes; diff --git a/packages/auth/app/components/Identity/corejam-identity.tsx b/packages/auth/app/components/Identity/corejam-identity.tsx index cd388dfd5..c6bc76718 100644 --- a/packages/auth/app/components/Identity/corejam-identity.tsx +++ b/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("/"); } } diff --git a/packages/auth/app/components/LoginForm/LoginForm.tsx b/packages/auth/app/components/LoginForm/LoginForm.tsx index e58393657..50f9221e0 100644 --- a/packages/auth/app/components/LoginForm/LoginForm.tsx +++ b/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; } diff --git a/packages/auth/app/components/RegisterForm/RegisterForm.tsx b/packages/auth/app/components/RegisterForm/RegisterForm.tsx index f888a06c9..36c807caa 100644 --- a/packages/auth/app/components/RegisterForm/RegisterForm.tsx +++ b/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() { diff --git a/packages/auth/app/components/ResetForm/auth-reset-form.tsx b/packages/auth/app/components/ResetForm/auth-reset-form.tsx index d80f8e509..7a6b2cfcc 100644 --- a/packages/auth/app/components/ResetForm/auth-reset-form.tsx +++ b/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"); } } diff --git a/packages/auth/app/index.html b/packages/auth/app/index.html index 4920d21a5..42e7672e0 100644 --- a/packages/auth/app/index.html +++ b/packages/auth/app/index.html @@ -7,6 +7,6 @@ - + diff --git a/packages/auth/app/layout/readme.md b/packages/auth/app/layout/readme.md deleted file mode 100644 index ca256b6af..000000000 --- a/packages/auth/app/layout/readme.md +++ /dev/null @@ -1,40 +0,0 @@ -# auth-layout - - - - - - -## Dependencies - -### Depends on - -- corejam-ui-base -- [auth-header](../components/Header) - -### Graph -```mermaid -graph TD; - auth-layout --> corejam-ui-base - auth-layout --> auth-header - auth-header --> corejam-box - auth-header --> corejam-base-link - auth-header --> corejam-identity - corejam-identity --> corejam-box - corejam-identity --> corejam-type - corejam-identity --> corejam-icons-account - corejam-identity --> corejam-base-link - corejam-identity --> corejam-form-container - corejam-identity --> corejam-flash - corejam-identity --> corejam-form-input - corejam-identity --> corejam-form-submit - corejam-identity --> corejam-button - corejam-flash --> corejam-box - corejam-form-input --> corejam-box - corejam-form-input --> corejam-type - style auth-layout fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/canvas/app/components/corejam-deploy/corejam-deploy.tsx b/packages/canvas/app/components/corejam-deploy/corejam-deploy.tsx index 7f9ca7ca0..50d948520 100644 --- a/packages/canvas/app/components/corejam-deploy/corejam-deploy.tsx +++ b/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}`); } } } diff --git a/packages/cli/src/commands/dev.ts b/packages/cli/src/commands/dev.ts index 79079ae4c..d3d7d6340 100644 --- a/packages/cli/src/commands/dev.ts +++ b/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(); diff --git a/packages/core-components/app/components/Image/Image.tsx b/packages/core-components/app/components/Image/Image.tsx index 64d1add1a..1f4cc8d76 100644 --- a/packages/core-components/app/components/Image/Image.tsx +++ b/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 ( - - {this.alt} - - ); + return {this.alt}; } } diff --git a/packages/core-components/app/components/Init/Init.tsx b/packages/core-components/app/components/Init/Init.tsx index 1bfab6401..e8fdbbeeb 100644 --- a/packages/core-components/app/components/Init/Init.tsx +++ b/packages/core-components/app/components/Init/Init.tsx @@ -1,20 +1,22 @@ -import { runSet } from "@corejam/run"; +import { setPatchedRouter } from "@corejam/run"; import { Component, h, Host, Prop, Watch } from "@stencil/core"; @Component({ tag: "corejam-init", }) export class Init { - @Prop({ reflect: false }) router = null; + @Prop() router = null; async componentWillLoad() { - if (!this.router) return; - runSet("router", this.router); + return new Promise((res) => { + setPatchedRouter(this.router); + return res(true); + }); } @Watch("router") - newRouter(newval) { - runSet("router", newval); + newRouter(router) { + setPatchedRouter(router); } render() { diff --git a/packages/core-components/app/components/Link/Link.tsx b/packages/core-components/app/components/Link/Link.tsx index e9db1a8fb..01019f19c 100644 --- a/packages/core-components/app/components/Link/Link.tsx +++ b/packages/core-components/app/components/Link/Link.tsx @@ -1,5 +1,5 @@ -import { href, runState } from "@corejam/run"; -import { Component, Event, EventEmitter, h, Host, Prop, State } from "@stencil/core"; +import { href, routerState } from "@corejam/run"; +import { Component, Event, EventEmitter, h, Prop, State } from "@stencil/core"; import { Link } from "./Link.types"; @Component({ @@ -19,42 +19,26 @@ export class BaseLink { @Event() routeChange: EventEmitter; - async componentWillLoad() { - await this.computeStyles(); - } - - async computeStyles() { + async componentWillRender() { const hash = await (await import("../../utils/style")).calculateStyles(this); this.hash = hash; } - renderLink() { - if (runState.router) { - const defaultProps = href(this.href, runState.router); - - const overwrittenProps = { - ...defaultProps, - onClick: (ev: MouseEvent) => { - this.routeChange.emit({ type: "routechange", newUrl: this.href }); - if (typeof defaultProps.onClick === "function") defaultProps.onClick(ev); - window.scrollTo({ top: 0 }); - }, - }; + render() { + const defaultProps = href(this.href, routerState.router); + const overwrittenProps = { + ...defaultProps, + onClick: (ev: MouseEvent) => { + this.routeChange.emit({ type: "routechange", newUrl: this.href }); + if (typeof defaultProps.onClick === "function") defaultProps.onClick(ev); + window.scrollTo({ top: 0 }); + }, + }; - return ( - - - - ); - } return ( - + ); } - - render() { - return {this.renderLink()}; - } } diff --git a/packages/dershop/app/layout/layout.tsx b/packages/dershop/app/app.tsx similarity index 86% rename from packages/dershop/app/layout/layout.tsx rename to packages/dershop/app/app.tsx index 18140cf14..98d6c720f 100644 --- a/packages/dershop/app/layout/layout.tsx +++ b/packages/dershop/app/app.tsx @@ -1,7 +1,7 @@ import { Component, Fragment, h } from "@stencil/core"; @Component({ - tag: "dershop-layout", + tag: "dershop-app", }) export class DerShopLayout { render() { @@ -10,7 +10,7 @@ export class DerShopLayout { - + diff --git a/packages/dershop/app/components.d.ts b/packages/dershop/app/components.d.ts index d2616a46a..75057749d 100644 --- a/packages/dershop/app/components.d.ts +++ b/packages/dershop/app/components.d.ts @@ -5,7 +5,6 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { objectFit } from "./components/dershop-image/dershop-image"; import { ManufacturerDB } from "../shared/types/Manufacturer"; import { Product } from "../shared/types/Product"; import { SEO } from "@corejam/base/dist/typings/Seo"; @@ -17,6 +16,8 @@ export namespace Components { "data": any; "page": number; } + interface DershopApp { + } interface DershopBrands { } interface DershopCart { @@ -49,16 +50,8 @@ export namespace Components { } interface DershopIconsSpotlight { } - interface DershopImage { - "alt": string; - "fit": objectFit; - "h": string; - "src": string; - } interface DershopInlineSearch { } - interface DershopLayout { - } interface DershopLogo { } interface DershopManufacturer { @@ -109,6 +102,12 @@ export namespace Components { "page": Number; "size": Number; } + interface DershopRouteAOrders { + "param": any; + } + interface DershopRouteAUsers { + "param": any; + } interface DershopRouteAccount { } interface DershopRouteAccountOrder { @@ -120,6 +119,9 @@ export namespace Components { interface DershopRouteAdminOrders { "param": any; } + interface DershopRouteAdminUsersEdit { + "param": any; + } interface DershopRouteCart { } interface DershopRouteIndex { @@ -163,6 +165,12 @@ declare global { prototype: HTMLDershopAdminOrderListElement; new (): HTMLDershopAdminOrderListElement; }; + interface HTMLDershopAppElement extends Components.DershopApp, HTMLStencilElement { + } + var HTMLDershopAppElement: { + prototype: HTMLDershopAppElement; + new (): HTMLDershopAppElement; + }; interface HTMLDershopBrandsElement extends Components.DershopBrands, HTMLStencilElement { } var HTMLDershopBrandsElement: { @@ -241,24 +249,12 @@ declare global { prototype: HTMLDershopIconsSpotlightElement; new (): HTMLDershopIconsSpotlightElement; }; - interface HTMLDershopImageElement extends Components.DershopImage, HTMLStencilElement { - } - var HTMLDershopImageElement: { - prototype: HTMLDershopImageElement; - new (): HTMLDershopImageElement; - }; interface HTMLDershopInlineSearchElement extends Components.DershopInlineSearch, HTMLStencilElement { } var HTMLDershopInlineSearchElement: { prototype: HTMLDershopInlineSearchElement; new (): HTMLDershopInlineSearchElement; }; - interface HTMLDershopLayoutElement extends Components.DershopLayout, HTMLStencilElement { - } - var HTMLDershopLayoutElement: { - prototype: HTMLDershopLayoutElement; - new (): HTMLDershopLayoutElement; - }; interface HTMLDershopLogoElement extends Components.DershopLogo, HTMLStencilElement { } var HTMLDershopLogoElement: { @@ -307,6 +303,18 @@ declare global { prototype: HTMLDershopProductListElement; new (): HTMLDershopProductListElement; }; + interface HTMLDershopRouteAOrdersElement extends Components.DershopRouteAOrders, HTMLStencilElement { + } + var HTMLDershopRouteAOrdersElement: { + prototype: HTMLDershopRouteAOrdersElement; + new (): HTMLDershopRouteAOrdersElement; + }; + interface HTMLDershopRouteAUsersElement extends Components.DershopRouteAUsers, HTMLStencilElement { + } + var HTMLDershopRouteAUsersElement: { + prototype: HTMLDershopRouteAUsersElement; + new (): HTMLDershopRouteAUsersElement; + }; interface HTMLDershopRouteAccountElement extends Components.DershopRouteAccount, HTMLStencilElement { } var HTMLDershopRouteAccountElement: { @@ -331,6 +339,12 @@ declare global { prototype: HTMLDershopRouteAdminOrdersElement; new (): HTMLDershopRouteAdminOrdersElement; }; + interface HTMLDershopRouteAdminUsersEditElement extends Components.DershopRouteAdminUsersEdit, HTMLStencilElement { + } + var HTMLDershopRouteAdminUsersEditElement: { + prototype: HTMLDershopRouteAdminUsersEditElement; + new (): HTMLDershopRouteAdminUsersEditElement; + }; interface HTMLDershopRouteCartElement extends Components.DershopRouteCart, HTMLStencilElement { } var HTMLDershopRouteCartElement: { @@ -406,6 +420,7 @@ declare global { interface HTMLElementTagNameMap { "dershop-account": HTMLDershopAccountElement; "dershop-admin-order-list": HTMLDershopAdminOrderListElement; + "dershop-app": HTMLDershopAppElement; "dershop-brands": HTMLDershopBrandsElement; "dershop-cart": HTMLDershopCartElement; "dershop-cart-line": HTMLDershopCartLineElement; @@ -419,9 +434,7 @@ declare global { "dershop-icons-cart": HTMLDershopIconsCartElement; "dershop-icons-menu": HTMLDershopIconsMenuElement; "dershop-icons-spotlight": HTMLDershopIconsSpotlightElement; - "dershop-image": HTMLDershopImageElement; "dershop-inline-search": HTMLDershopInlineSearchElement; - "dershop-layout": HTMLDershopLayoutElement; "dershop-logo": HTMLDershopLogoElement; "dershop-manufacturer": HTMLDershopManufacturerElement; "dershop-manufacturer-list": HTMLDershopManufacturerListElement; @@ -430,10 +443,13 @@ declare global { "dershop-product": HTMLDershopProductElement; "dershop-product-box": HTMLDershopProductBoxElement; "dershop-product-list": HTMLDershopProductListElement; + "dershop-route-a-orders": HTMLDershopRouteAOrdersElement; + "dershop-route-a-users": HTMLDershopRouteAUsersElement; "dershop-route-account": HTMLDershopRouteAccountElement; "dershop-route-account-order": HTMLDershopRouteAccountOrderElement; "dershop-route-admin-order-view": HTMLDershopRouteAdminOrderViewElement; "dershop-route-admin-orders": HTMLDershopRouteAdminOrdersElement; + "dershop-route-admin-users-edit": HTMLDershopRouteAdminUsersEditElement; "dershop-route-cart": HTMLDershopRouteCartElement; "dershop-route-index": HTMLDershopRouteIndexElement; "dershop-route-login": HTMLDershopRouteLoginElement; @@ -455,6 +471,8 @@ declare namespace LocalJSX { "data"?: any; "page"?: number; } + interface DershopApp { + } interface DershopBrands { } interface DershopCart { @@ -487,16 +505,8 @@ declare namespace LocalJSX { } interface DershopIconsSpotlight { } - interface DershopImage { - "alt"?: string; - "fit"?: objectFit; - "h"?: string; - "src"?: string; - } interface DershopInlineSearch { } - interface DershopLayout { - } interface DershopLogo { } interface DershopManufacturer { @@ -547,6 +557,12 @@ declare namespace LocalJSX { "page"?: Number; "size"?: Number; } + interface DershopRouteAOrders { + "param"?: any; + } + interface DershopRouteAUsers { + "param"?: any; + } interface DershopRouteAccount { } interface DershopRouteAccountOrder { @@ -558,6 +574,9 @@ declare namespace LocalJSX { interface DershopRouteAdminOrders { "param"?: any; } + interface DershopRouteAdminUsersEdit { + "param"?: any; + } interface DershopRouteCart { } interface DershopRouteIndex { @@ -590,6 +609,7 @@ declare namespace LocalJSX { interface IntrinsicElements { "dershop-account": DershopAccount; "dershop-admin-order-list": DershopAdminOrderList; + "dershop-app": DershopApp; "dershop-brands": DershopBrands; "dershop-cart": DershopCart; "dershop-cart-line": DershopCartLine; @@ -603,9 +623,7 @@ declare namespace LocalJSX { "dershop-icons-cart": DershopIconsCart; "dershop-icons-menu": DershopIconsMenu; "dershop-icons-spotlight": DershopIconsSpotlight; - "dershop-image": DershopImage; "dershop-inline-search": DershopInlineSearch; - "dershop-layout": DershopLayout; "dershop-logo": DershopLogo; "dershop-manufacturer": DershopManufacturer; "dershop-manufacturer-list": DershopManufacturerList; @@ -614,10 +632,13 @@ declare namespace LocalJSX { "dershop-product": DershopProduct; "dershop-product-box": DershopProductBox; "dershop-product-list": DershopProductList; + "dershop-route-a-orders": DershopRouteAOrders; + "dershop-route-a-users": DershopRouteAUsers; "dershop-route-account": DershopRouteAccount; "dershop-route-account-order": DershopRouteAccountOrder; "dershop-route-admin-order-view": DershopRouteAdminOrderView; "dershop-route-admin-orders": DershopRouteAdminOrders; + "dershop-route-admin-users-edit": DershopRouteAdminUsersEdit; "dershop-route-cart": DershopRouteCart; "dershop-route-index": DershopRouteIndex; "dershop-route-login": DershopRouteLogin; @@ -638,6 +659,7 @@ declare module "@stencil/core" { interface IntrinsicElements { "dershop-account": LocalJSX.DershopAccount & JSXBase.HTMLAttributes; "dershop-admin-order-list": LocalJSX.DershopAdminOrderList & JSXBase.HTMLAttributes; + "dershop-app": LocalJSX.DershopApp & JSXBase.HTMLAttributes; "dershop-brands": LocalJSX.DershopBrands & JSXBase.HTMLAttributes; "dershop-cart": LocalJSX.DershopCart & JSXBase.HTMLAttributes; "dershop-cart-line": LocalJSX.DershopCartLine & JSXBase.HTMLAttributes; @@ -651,9 +673,7 @@ declare module "@stencil/core" { "dershop-icons-cart": LocalJSX.DershopIconsCart & JSXBase.HTMLAttributes; "dershop-icons-menu": LocalJSX.DershopIconsMenu & JSXBase.HTMLAttributes; "dershop-icons-spotlight": LocalJSX.DershopIconsSpotlight & JSXBase.HTMLAttributes; - "dershop-image": LocalJSX.DershopImage & JSXBase.HTMLAttributes; "dershop-inline-search": LocalJSX.DershopInlineSearch & JSXBase.HTMLAttributes; - "dershop-layout": LocalJSX.DershopLayout & JSXBase.HTMLAttributes; "dershop-logo": LocalJSX.DershopLogo & JSXBase.HTMLAttributes; "dershop-manufacturer": LocalJSX.DershopManufacturer & JSXBase.HTMLAttributes; "dershop-manufacturer-list": LocalJSX.DershopManufacturerList & JSXBase.HTMLAttributes; @@ -662,10 +682,13 @@ declare module "@stencil/core" { "dershop-product": LocalJSX.DershopProduct & JSXBase.HTMLAttributes; "dershop-product-box": LocalJSX.DershopProductBox & JSXBase.HTMLAttributes; "dershop-product-list": LocalJSX.DershopProductList & JSXBase.HTMLAttributes; + "dershop-route-a-orders": LocalJSX.DershopRouteAOrders & JSXBase.HTMLAttributes; + "dershop-route-a-users": LocalJSX.DershopRouteAUsers & JSXBase.HTMLAttributes; "dershop-route-account": LocalJSX.DershopRouteAccount & JSXBase.HTMLAttributes; "dershop-route-account-order": LocalJSX.DershopRouteAccountOrder & JSXBase.HTMLAttributes; "dershop-route-admin-order-view": LocalJSX.DershopRouteAdminOrderView & JSXBase.HTMLAttributes; "dershop-route-admin-orders": LocalJSX.DershopRouteAdminOrders & JSXBase.HTMLAttributes; + "dershop-route-admin-users-edit": LocalJSX.DershopRouteAdminUsersEdit & JSXBase.HTMLAttributes; "dershop-route-cart": LocalJSX.DershopRouteCart & JSXBase.HTMLAttributes; "dershop-route-index": LocalJSX.DershopRouteIndex & JSXBase.HTMLAttributes; "dershop-route-login": LocalJSX.DershopRouteLogin & JSXBase.HTMLAttributes; diff --git a/packages/dershop/app/components/dershop-cart-mini/dershop-cart-mini.css b/packages/dershop/app/components/dershop-cart-mini/dershop-cart-mini.css deleted file mode 100644 index 211974db8..000000000 --- a/packages/dershop/app/components/dershop-cart-mini/dershop-cart-mini.css +++ /dev/null @@ -1,27 +0,0 @@ -dershop-cart-mini { - display: block; - position: relative; -} - -@keyframes showMiniCart { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -dershop-cart-mini span { - position: absolute; - display: inline-block; - padding: 4px 8px; - color: #fff; - font-size: 0.8rem; - left: -5px; - top: -15px; - z-index: 1; - background: black; - border-radius: 20px; - animation: showMiniCart 500ms ease-in 0s 1; -} diff --git a/packages/dershop/app/components/dershop-cart-mini/dershop-cart-mini.tsx b/packages/dershop/app/components/dershop-cart-mini/dershop-cart-mini.tsx index d1e45d52a..451da0f9e 100644 --- a/packages/dershop/app/components/dershop-cart-mini/dershop-cart-mini.tsx +++ b/packages/dershop/app/components/dershop-cart-mini/dershop-cart-mini.tsx @@ -3,7 +3,6 @@ import basket from "../../../shared/store/basket"; @Component({ tag: "dershop-cart-mini", - styleUrl: "dershop-cart-mini.css", }) export class DershopCartMini implements ComponentInterface { render() { diff --git a/packages/dershop/app/components/dershop-cart/dershop-cart.tsx b/packages/dershop/app/components/dershop-cart/dershop-cart.tsx index 8b694bdb6..ebccd3104 100644 --- a/packages/dershop/app/components/dershop-cart/dershop-cart.tsx +++ b/packages/dershop/app/components/dershop-cart/dershop-cart.tsx @@ -1,4 +1,4 @@ -import { runState } from "@corejam/run"; +import { routerState } from "@corejam/run"; import { Component, ComponentInterface, h, Host } from "@stencil/core"; import { CheckoutStates } from "../../../shared/machines/basket"; import basket, { basketService } from "../../../shared/store/basket"; @@ -56,7 +56,7 @@ export class DershopCart implements ComponentInterface { { - runState.router.push("/checkout"); + routerState.router.push("/checkout"); basketService.send({ type: "NEXT_STEP" }); }} weight="bold" diff --git a/packages/dershop/app/components/dershop-form-register/dershop-form-register.tsx b/packages/dershop/app/components/dershop-form-register/dershop-form-register.tsx index 43280fdfe..175499d1f 100644 --- a/packages/dershop/app/components/dershop-form-register/dershop-form-register.tsx +++ b/packages/dershop/app/components/dershop-form-register/dershop-form-register.tsx @@ -1,7 +1,7 @@ import { coreState } from "@corejam/core-components"; import { authStore } from "@corejam/plugin-auth"; import { userRegisterMutationGQL } from "@corejam/plugin-auth/shared/graphql/Mutations"; -import { runState } from "@corejam/run"; +import { routerState } from "@corejam/run"; import { Component, h, Host, Listen } from "@stencil/core"; import gql from "graphql-tag"; @@ -29,12 +29,12 @@ export class AuthRegister { }); if (request.data.userRegister) { - runState.router.push("/login"); + routerState.router.push("/login"); } } componentWillLoad() { - if (authStore.identity) runState.router.push("/"); + if (authStore.identity) routerState.router.push("/"); } render() { diff --git a/packages/dershop/app/components/dershop-header/header.css b/packages/dershop/app/components/dershop-header/header.css deleted file mode 100644 index 20c03aeaa..000000000 --- a/packages/dershop/app/components/dershop-header/header.css +++ /dev/null @@ -1,4 +0,0 @@ -:host { - display: block; - height: 85px; -} diff --git a/packages/dershop/app/components/dershop-image/dershop-image.css b/packages/dershop/app/components/dershop-image/dershop-image.css deleted file mode 100644 index 6c3e7e04b..000000000 --- a/packages/dershop/app/components/dershop-image/dershop-image.css +++ /dev/null @@ -1,9 +0,0 @@ -:host { - display: block; -} - -img { - width: 100%; - height: 100%; - object-fit: contain; -} diff --git a/packages/dershop/app/components/dershop-image/dershop-image.tsx b/packages/dershop/app/components/dershop-image/dershop-image.tsx deleted file mode 100644 index c53b6d391..000000000 --- a/packages/dershop/app/components/dershop-image/dershop-image.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Component, Element, h, Host, Prop } from "@stencil/core"; - -export type objectFit = - | "contain" - | "cover" - | "fill" - | "none" - | "scale-down" - | "bottom" - | "center" - | "left" - | "left-bottom" - | "left-top" - | "right" - | "right-bottom" - | "right-top" - | "top"; - -@Component({ - tag: "dershop-image", - styleUrl: "dershop-image.css", -}) -export class DershopImage { - @Element() el: HTMLElement; - @Prop() src: string; - @Prop() alt: string; - @Prop() fit: objectFit; - @Prop() h: string; - - render() { - return ( - - {this.alt} - - ); - } -} diff --git a/packages/dershop/app/components/dershop-image/readme.md b/packages/dershop/app/components/dershop-image/readme.md deleted file mode 100644 index 80a28eb05..000000000 --- a/packages/dershop/app/components/dershop-image/readme.md +++ /dev/null @@ -1,33 +0,0 @@ -# dershop-image - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `alt` | `alt` | | `string` | `undefined` | -| `fit` | `fit` | | `"bottom" \| "center" \| "contain" \| "cover" \| "fill" \| "left" \| "left-bottom" \| "left-top" \| "none" \| "right" \| "right-bottom" \| "right-top" \| "scale-down" \| "top"` | `undefined` | -| `h` | `h` | | `string` | `undefined` | -| `src` | `src` | | `string` | `undefined` | - - -## Dependencies - -### Used by - - - [dershop-product](../product) - -### Graph -```mermaid -graph TD; - dershop-product --> dershop-image - style dershop-image fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/dershop/app/components/dershop-inline-search/dershop-inline-search.tsx b/packages/dershop/app/components/dershop-inline-search/dershop-inline-search.tsx index 3e3333f3d..bd1f692cc 100644 --- a/packages/dershop/app/components/dershop-inline-search/dershop-inline-search.tsx +++ b/packages/dershop/app/components/dershop-inline-search/dershop-inline-search.tsx @@ -1,4 +1,4 @@ -import { runState } from "@corejam/run"; +import { routerState } from "@corejam/run"; import { Component, Element, h, Host, Listen, State } from "@stencil/core"; import { dershopState } from "../../store/dershop"; @@ -22,7 +22,7 @@ export class DershopInlineSearch { @Listen("formEvent", { target: "document" }) async formEvent({ detail }) { - if (detail.name === "inline-search") runState.router.push(`/products?searchTerm=${detail.value}`); + if (detail.name === "inline-search") routerState.router.push(`/products?searchTerm=${detail.value}`); dershopState.search = detail.value; } diff --git a/packages/dershop/app/components/dershop-product-box/product-box.css b/packages/dershop/app/components/dershop-product-box/product-box.css deleted file mode 100644 index c3f827bf9..000000000 --- a/packages/dershop/app/components/dershop-product-box/product-box.css +++ /dev/null @@ -1,8 +0,0 @@ -:host { - display: block; - width: 100%; -} - -.productImage { - min-height: 200px; -} diff --git a/packages/dershop/app/components/dershop-product-list/product-list.css b/packages/dershop/app/components/dershop-product-list/product-list.css deleted file mode 100644 index fe8bbc5f4..000000000 --- a/packages/dershop/app/components/dershop-product-list/product-list.css +++ /dev/null @@ -1,4 +0,0 @@ -:host { - display: block; - width: 100%; -} diff --git a/packages/dershop/app/components/dershop-product-list/product-list.tsx b/packages/dershop/app/components/dershop-product-list/product-list.tsx index 6df2800ad..c1c4d54b8 100644 --- a/packages/dershop/app/components/dershop-product-list/product-list.tsx +++ b/packages/dershop/app/components/dershop-product-list/product-list.tsx @@ -80,7 +80,6 @@ export class ProductList { {this._list.items?.map((product) => ( - + > {this._product.images?.map((image) => ( - + > ))} diff --git a/packages/dershop/app/index.html b/packages/dershop/app/index.html index c481d265d..d59205137 100644 --- a/packages/dershop/app/index.html +++ b/packages/dershop/app/index.html @@ -7,6 +7,6 @@ - + diff --git a/packages/dershop/app/layout/readme.md b/packages/dershop/app/layout/readme.md deleted file mode 100644 index e1716fb18..000000000 --- a/packages/dershop/app/layout/readme.md +++ /dev/null @@ -1,58 +0,0 @@ -# dershop-layout - - - - - - -## Dependencies - -### Depends on - -- corejam-ui-base -- [dershop-header](../components/dershop-header) -- corejam-box -- [dershop-footer](../components/dershop-footer) - -### Graph -```mermaid -graph TD; - dershop-layout --> corejam-ui-base - dershop-layout --> dershop-header - dershop-layout --> corejam-box - dershop-layout --> dershop-footer - dershop-header --> corejam-box - dershop-header --> dershop-hamburger - dershop-header --> dershop-inline-search - dershop-header --> corejam-base-link - dershop-header --> dershop-logo - dershop-header --> dershop-cart-mini - dershop-header --> corejam-identity - dershop-hamburger --> dershop-icons-menu - dershop-hamburger --> corejam-box - dershop-hamburger --> corejam-base-link - dershop-hamburger --> corejam-type - dershop-inline-search --> dershop-icons-spotlight - dershop-inline-search --> corejam-box - dershop-inline-search --> corejam-form-input - corejam-form-input --> corejam-box - corejam-form-input --> corejam-type - dershop-cart-mini --> dershop-icons-cart - corejam-identity --> corejam-box - corejam-identity --> corejam-type - corejam-identity --> corejam-icons-account - corejam-identity --> corejam-base-link - corejam-identity --> corejam-form-container - corejam-identity --> corejam-flash - corejam-identity --> corejam-form-input - corejam-identity --> corejam-form-submit - corejam-identity --> corejam-button - corejam-flash --> corejam-box - dershop-footer --> corejam-box - dershop-footer --> dershop-logo - style dershop-layout fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/dershop/app/routes/[url].tsx b/packages/dershop/app/routes/[url].tsx index 72b24b570..21b5c0857 100644 --- a/packages/dershop/app/routes/[url].tsx +++ b/packages/dershop/app/routes/[url].tsx @@ -1,5 +1,5 @@ import { coreState } from "@corejam/core-components"; -import { Component, h, Host, Prop, State, Watch } from "@stencil/core"; +import { Component, h, Prop, State, Watch } from "@stencil/core"; import gql from "graphql-tag"; import { getObjectFromURL } from "../../shared/graphql/Queries/URL"; import { SEODocument } from "../../shared/types/Seo"; @@ -47,6 +47,6 @@ export class UrlRoute { } render() { - return {this.getComponentForRoute()}; + return this.getComponentForRoute(); } } diff --git a/packages/dershop/app/routes/admin/orders.tsx b/packages/dershop/app/routes/admin/orders.tsx new file mode 100644 index 000000000..21c8383d8 --- /dev/null +++ b/packages/dershop/app/routes/admin/orders.tsx @@ -0,0 +1,16 @@ +import { Component, h, Host, Prop } from "@stencil/core"; + +@Component({ + tag: "dershop-route-a-orders", +}) +export class AdminOrderList { + @Prop() param: any; + + render() { + return ( + + + + ); + } +} diff --git a/packages/dershop/app/routes/admin/users.tsx b/packages/dershop/app/routes/admin/users.tsx new file mode 100644 index 000000000..5643fac64 --- /dev/null +++ b/packages/dershop/app/routes/admin/users.tsx @@ -0,0 +1,16 @@ +import { Component, h, Host, Prop } from "@stencil/core"; + +@Component({ + tag: "dershop-route-a-users", +}) +export class AdminOrderList { + @Prop() param: any; + + render() { + return ( + + + + ); + } +} diff --git a/packages/dershop/app/routes/admin/users/edit/[page].tsx b/packages/dershop/app/routes/admin/users/edit/[page].tsx new file mode 100644 index 000000000..14a708403 --- /dev/null +++ b/packages/dershop/app/routes/admin/users/edit/[page].tsx @@ -0,0 +1,16 @@ +import { Component, h, Host, Prop } from "@stencil/core"; + +@Component({ + tag: "dershop-route-admin-users-edit", +}) +export class AdminOrderList { + @Prop() param: any; + + render() { + return ( + + + + ); + } +} diff --git a/packages/dershop/package.json b/packages/dershop/package.json index c673f64db..b9faaed43 100644 --- a/packages/dershop/package.json +++ b/packages/dershop/package.json @@ -10,7 +10,7 @@ "collection": "web-components/collection/collection-manifest.json", "collection:main": "web-components/collection/index.js", "homepage": "https://dershop.dev/", - "description": "Corejam Canvas plugin - Serverless Jamstack Webshop", + "description": "corejam dershop app - Serverless Jamstack Webshop", "bugs": { "url": "https://github.com/corejam/corejam/issues" }, diff --git a/packages/dershop/prerender.config.ts b/packages/dershop/prerender.config.ts new file mode 100644 index 000000000..64d549a53 --- /dev/null +++ b/packages/dershop/prerender.config.ts @@ -0,0 +1,13 @@ +import { extractRoutes } from "@corejam/rollup-plugin"; +import { PrerenderConfig } from "@stencil/core"; + +export const config: PrerenderConfig = { + entryUrls: extractRoutes(__dirname).map((r) => { + if (r.exact) { + return r.url; + } + const tmp = r.url.split("/"); + tmp[tmp.length - 1] = "1"; + return tmp.join("/"); + }), +}; diff --git a/packages/dershop/shared/machines/basket.ts b/packages/dershop/shared/machines/basket.ts index 23fe1ad1c..7ea85a9cc 100644 --- a/packages/dershop/shared/machines/basket.ts +++ b/packages/dershop/shared/machines/basket.ts @@ -1,6 +1,6 @@ import { coreState } from "@corejam/core-components"; import { authStore } from "@corejam/plugin-auth"; -import { runState } from "@corejam/run"; +import { routerState } from "@corejam/run"; import gql from "graphql-tag"; import { assign, createMachine } from "xstate"; import { orderCreateGQL } from "../../shared/graphql/Mutations/Order"; @@ -214,7 +214,7 @@ export const basketMachine = createMachine runState.router.push("/thankyou"), + entry: () => routerState.router.push("/thankyou"), on: { "": [ { diff --git a/packages/dershop/stencil.config.ts b/packages/dershop/stencil.config.ts index 895448710..15daa11df 100644 --- a/packages/dershop/stencil.config.ts +++ b/packages/dershop/stencil.config.ts @@ -21,6 +21,7 @@ const config: Config = { plugins: [ replace({ "process.env.API_ORIGIN": JSON.stringify(process.env.API_ORIGIN), + "process.env.POSTCSS_BROWSERS": JSON.stringify(process.env.POSTCSS_BROWSERS), }), ], rollupPlugins: { @@ -57,6 +58,7 @@ if (targets.includes("prerender")) { empty: false, serviceWorker: null, baseUrl: "http://localhost:3000", + prerenderConfig: "./prerender.config.ts", }); } if (targets.includes("react")) { diff --git a/packages/rollup-plugin/src/index.ts b/packages/rollup-plugin/src/index.ts index 61d4ce788..1d7248782 100644 --- a/packages/rollup-plugin/src/index.ts +++ b/packages/rollup-plugin/src/index.ts @@ -1,4 +1,5 @@ import { writeConfig } from "./generateConfig"; +export { extractRoutes } from "./extractRoutes"; export default function corejam() { return { diff --git a/packages/run/app/components/Router/Router.tsx b/packages/run/app/components/Router/Router.tsx index 14e0a6581..ed3804cb8 100644 --- a/packages/run/app/components/Router/Router.tsx +++ b/packages/run/app/components/Router/Router.tsx @@ -1,8 +1,9 @@ -import { Component, h, Host } from "@stencil/core"; -import { match, Route } from "stencil-router-v2"; -import { CorejamRoute, runState } from "../../store/runStore"; +import { Component, h } from "@stencil/core"; +import { match, Route } from "@stencil/router"; +import { routerState, runState } from "../../store"; +import { CorejamRoute } from "../../store/types"; -const Router = runState.router; +const Router = routerState.router; @Component({ tag: "corejam-router", @@ -40,58 +41,44 @@ export class CorejamRouter { render() { const routes = this.collectRoutesInRightOrder(); - const Layout = runState.layout && runState.layout.length > 0 ? runState.layout[0].component : "div"; return ( - - - {routes.map((route: CorejamRoute) => { - const Component = route.component; - //We have a canvasPage object coming in - if (route.exact && route.canvasPage === true) { - return ( - -
- - ); - } + + {routes.map((route: CorejamRoute) => { + const Component = route.component; - if (route.exact && route.url.includes("component")) { - return ( - - - - ); - } - - if (route.exact && !route.dev && !route.third) { - return ( - - - - - - ); - } - if (route.exact && (route.dev || route.third)) { - return ( - - - - ); - } + //We have a canvasPage object coming in + if (route.exact && route.canvasPage === true) { return ( ( - - - - )} - /> + render={() =>
} + > + ); + } + + if (route.exact && route.url.includes("component")) { + return ( + } + > ); - })} - - + } + + if (route.exact && !route.dev && !route.third) { + return }>; + } + if (route.exact && (route.dev || route.third)) { + return }>; + } + return ( + } + > + ); + })} + ); } } diff --git a/packages/run/app/components/Welcome/Welcome.tsx b/packages/run/app/components/Welcome/Welcome.tsx index 8847cb91a..8be049160 100644 --- a/packages/run/app/components/Welcome/Welcome.tsx +++ b/packages/run/app/components/Welcome/Welcome.tsx @@ -1,5 +1,5 @@ import { Component, h, Host } from "@stencil/core"; -import { href, runState } from "../../store/runStore"; +import { href, routerState, runState } from "../../store"; @Component({ tag: "corejam-dev-welcome", @@ -11,7 +11,6 @@ export class Welcome { display: "flex", justifyContent: "center", }; - return (
@@ -24,7 +23,7 @@ export class Welcome { if (route.url.includes("component")) return (
  • - {route.component} + {route.component}
    • ); })} @@ -37,7 +36,7 @@ export class Welcome { if (!route.url.includes("component")) return (
  • - {route.component} + {route.component}
    • ); })} @@ -55,7 +54,7 @@ export class Welcome { {plugin.router.routes.map((route) => { return (
  • - {route.component} + {route.component}
    • ); })} diff --git a/packages/run/app/index.ts b/packages/run/app/index.ts index 1fe366117..43f84fb94 100644 --- a/packages/run/app/index.ts +++ b/packages/run/app/index.ts @@ -1,3 +1,3 @@ -export { Components, JSX } from "./components"; -export * from "./store/runStore"; +export type { Components, JSX } from "./components"; +export * from "./store/index"; export * from "./utils/index"; diff --git a/packages/run/app/store/index.ts b/packages/run/app/store/index.ts new file mode 100644 index 000000000..84914875e --- /dev/null +++ b/packages/run/app/store/index.ts @@ -0,0 +1,2 @@ +export * from "./routerStore"; +export * from "./runStore"; diff --git a/packages/run/app/store/routerStore.ts b/packages/run/app/store/routerStore.ts new file mode 100644 index 000000000..919b34240 --- /dev/null +++ b/packages/run/app/store/routerStore.ts @@ -0,0 +1,23 @@ +import { createRouter, Router as RouterType } from "@stencil/router"; +import { createStore } from "@stencil/store"; + +export { href } from "@stencil/router"; + +export type CorejamRouterStore = { + router: RouterType; +}; + +const { state, set } = createStore({ + router: createRouter(), +}); + +export const routerState = state; + +export const setPatchedRouter = (router) => { + const patchedRouter = { + ...router, + onHrefRender: () => undefined, + serializeURL: () => undefined, + }; + set("router", patchedRouter); +}; diff --git a/packages/run/app/store/runStore.ts b/packages/run/app/store/runStore.ts index c381198a3..dcdd03619 100644 --- a/packages/run/app/store/runStore.ts +++ b/packages/run/app/store/runStore.ts @@ -1,25 +1,9 @@ import { createStore } from "@stencil/store"; -import { createRouter, Router } from "stencil-router-v2"; - -export { href } from "stencil-router-v2"; - -export const { state, get, reset, set, onChange } = createStore({ - router: createRouter(), -}); +import { CorejamRoute } from "./types"; export type CorejamMode = "development" | "production" | "static"; -export type CorejamRoute = { - url: string; - exact: boolean; - canvasPage?: boolean; - component: string; - dev?: boolean; - third?: boolean; -}; - export type CorejamRunStore = { - router: Router; routes: CorejamRoute[]; mode: CorejamMode; wrapper: string[] | []; @@ -29,7 +13,7 @@ export type CorejamRunStore = { }; type LayoutEntry = { - component: string; + component?: string; }; export const { @@ -39,7 +23,6 @@ export const { set: runSet, onChange: runChange, } = createStore({ - router: createRouter(), routes: null, mode: null, wrapper: null, diff --git a/packages/run/app/store/types.ts b/packages/run/app/store/types.ts new file mode 100644 index 000000000..252d20e26 --- /dev/null +++ b/packages/run/app/store/types.ts @@ -0,0 +1,8 @@ +export type CorejamRoute = { + url: string; + exact: boolean; + canvasPage?: boolean; + component: string; + dev?: boolean; + third?: boolean; +}; diff --git a/packages/run/package.json b/packages/run/package.json index 01c83bede..45c64f586 100644 --- a/packages/run/package.json +++ b/packages/run/package.json @@ -30,9 +30,9 @@ "@corejam/cli": "0.0.25", "@rollup/plugin-replace": "2.4.1", "@stencil/core": "2.4.0", + "@stencil/router": "2.0.0-2", "@stencil/store": "1.4.1", - "dotenv": "8.2.0", - "stencil-router-v2": "0.6.0" + "dotenv": "8.2.0" }, "devDependencies": { "@corejam/rollup-plugin": "0.0.7", diff --git a/yarn.lock b/yarn.lock index baf474cc8..004e18f1a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2222,6 +2222,13 @@ resolved "https://registry.yarnpkg.com/@stencil/react-output-target/-/react-output-target-0.0.9.tgz#b225611c5743f0285c37d92bb47d9369ba462c54" integrity sha512-t2sSkm/VGftBqewK47eZonaHIXW7CYWlsDy6Ln4jqNVpr93CuPWkg7rsnPiZrJrU1NBuTgA0hC2xoRcAJVm7Sw== +"@stencil/router@2.0.0-2": + version "2.0.0-2" + resolved "https://registry.yarnpkg.com/@stencil/router/-/router-2.0.0-2.tgz#2afa9de30325e1a54f4750cc3169d537a4400fc2" + integrity sha512-GTRZC/kttqUyFuu/mb3ua3MmLFXhS9q1msWfNquopuVYH7j29LclQ/13nV7sLR8h3BWNKWOYjLSIykhxKJ6UUw== + dependencies: + "@stencil/store" "^1.1.0" + "@stencil/store@1.4.1", "@stencil/store@^1.1.0": version "1.4.1" resolved "https://registry.yarnpkg.com/@stencil/store/-/store-1.4.1.tgz#6804de778921df7dd222a487363a147690254d83"