First commit

zaikinv · Dec 18, 2022 · 639e18c · 639e18c
commit 639e18c
Show file tree

Hide file tree

Showing 151 changed files with 77,463 additions and 0 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/encodings.xml b/.idea/encodings.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/t-shop.iml b/.idea/t-shop.iml
diff --git a/README.md b/README.md
@@ -0,0 +1,50 @@
+## Description
+
+Demo shop for the article [You Might Not Need Module Federation: Orchestrate your Microfrontends at Runtime with Import Maps]().
+
+## Prerequisites
+
+Node [18.12.0](https://nodejs.org/en/blog/release/v18.12.0).
+
+## Project structure
+
+The project is using [NPM workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces) and [Nx](https://nx.dev/).
+
+```
+t-shop
+├─ mfs ⬅ microfrontends
+│  ├─ product-buy-box
+│  ├─ product-teaser
+│  ├─ product-tile
+│  ├─ shop-footer
+│  └─ shop-header
+├─ publisher ⬅ handles submission of assets
+├─ resolver ⬅ stores and updates import map
+└─ shell ⬅ host app
+```
+
+## Installation
+
+```bash
+npm install
+```
+
+## Running the app
+
+1. Run Import Map Resolver in terminal 1
+
+```bash
+npm run start
+```
+
+2. Build and publish microfrontends in terminal 2
+
+```bash
+npm run build
+```
+
+3. Open http://localhost:4173
+
+## Import map server
+
+You can inspect current import map by calling: http://localhost:3000/api/
diff --git a/mfs/product-buy-box/.gitignore b/mfs/product-buy-box/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/mfs/product-buy-box/index.html b/mfs/product-buy-box/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <product-buy-box
+      title="T-shirt"
+      price="€ 9.99"
+      available-colors='["grey", "aliceblue", "white", "green"]'
+    ></product-buy-box>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/mfs/product-buy-box/package.json b/mfs/product-buy-box/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "product-buy-box",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "build": "vue-tsc && vite build && publisher",
+    "build:stats": "vue-tsc && vite build && node publish.js && open 'stats.html'",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.41"
+  },
+  "devDependencies": {
+    "publisher": "file:../../publisher",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "open": "^8.4.0",
+    "rollup-plugin-visualizer": "^5.8.3",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3",
+    "vite-plugin-css-injected-by-js": "^2.1.1",
+    "vue-tsc": "^1.0.9"
+  }
+}
diff --git a/mfs/product-buy-box/src/App.ce.vue b/mfs/product-buy-box/src/App.ce.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { ref } from "vue";
+
+const props = defineProps<{
+  title: string;
+  price: string;
+  availableColors: string;
+}>();
+
+const selectedColor = ref("");
+
+const addToCart = () => {
+  (document as any).dispatchEvent(
+    new CustomEvent("add-to-cart", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        title: props.title,
+        price: props.price,
+        color: selectedColor.value,
+      },
+    })
+  );
+};
+
+const selectColor = (color: string) => {
+  selectedColor.value = color;
+  (document as any).dispatchEvent(
+    new CustomEvent("select-color", {
+      bubbles: true,
+      composed: true,
+      detail: color,
+    })
+  );
+};
+</script>
+
+<template>
+  <h1 class="product__title">{{ title }}</h1>
+  <p class="product__price">€{{ price }}</p>
+  <p class="product__description">
+    Looking for a stylish and comfortable T-shirt that shows off your
+    personality? Check out our T-shirt with a print! Made from 100% soft cotton,
+    this T-shirt is both comfortable and fashionable. The vibrant print is sure
+    to turn heads, whether you're wearing it out on the town or just relaxing at
+    home.
+  </p>
+
+  <div class="product__colors">
+    <button
+        v-for="color in JSON.parse(availableColors)"
+        :style="{ 'background-color': color }"
+        @click.stop="selectColor(color)"
+    ></button>
+  </div>
+  <button
+    class="product__add-to-cart product-add-to-cart"
+    @click.stop="addToCart"
+  >
+    <svg
+      height="20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+    >
+      <path
+        d="M7 23a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm0 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm14-6a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm0 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm9-28h-3a1 1 0 0 0-1 .76L25.22 5H2a1 1 0 0 0-.76.34 1 1 0 0 0-.23.8l2 14A1 1 0 0 0 4 21h20a1 1 0 0 0 1-.86l2-13.95.78-3.19H30a1 1 0 0 0 0-2zm-6.87 18H4.87L3.15 7h21.7z"
+      />
+    </svg>
+    <div class="product-add-to-cart__label">Add to cart</div>
+  </button>
+</template>
+
+<style scoped lang="scss">
+* {
+  font-family: Avenir Next;
+}
+
+.product {
+  &__image {
+    width: 100%;
+  }
+  &__title {
+    margin-top: 0;
+  }
+  &__add-to-cart {
+    all: unset;
+    border: 1px solid black;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 3rem;
+  }
+
+  &__colors button {
+    all: unset;
+    height: 2rem;
+    width: 2rem;
+    margin: 2rem 0;
+    cursor: pointer;
+    margin-right: 1rem;
+    border: 1px solid black;
+  }
+}
+
+.product-add-to-cart__label {
+  margin-left: 0.5rem;
+}
+</style>
diff --git a/mfs/product-buy-box/src/main.ts b/mfs/product-buy-box/src/main.ts
@@ -0,0 +1,6 @@
+import { defineCustomElement } from "vue";
+import App from "./App.ce.vue";
+
+export const AppCustomElement = defineCustomElement(App);
+
+customElements.define("product-buy-box", AppCustomElement);
diff --git a/mfs/product-buy-box/src/style.css b/mfs/product-buy-box/src/style.css
@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/mfs/product-buy-box/src/vite-env.d.ts b/mfs/product-buy-box/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}