hacomono-lib · mew-ton · Oct 22, 2023 · Sep 27, 2023 · Sep 27, 2023 · Sep 27, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,27 @@
+# VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+!.vscode/*.code-workspace
+
+# Intellij idea
+*.iml
+.idea
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
 # Logs
 logs
 *.log
@@ -123,10 +147,15 @@ dist
 .vscode-test
 
 # yarn v2
+examples/*/.yarn
 .yarn/cache
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
 
+# turborepo
 .turbo
+
+# vite timestamp
+vite.config.ts.timestamp-*
diff --git a/.vscode/project.code-workspace b/.vscode/project.code-workspace
@@ -5,8 +5,8 @@
       "name": "#root"
     },
     {
-      "path": "../docs",
-      "name": "#documentation"
+      "path": "./_n",
+      "name": "___PACKAGES___"
     },
     {
       "path": "../packages/enclosure-vue",
@@ -17,28 +17,32 @@
       "name": "@passerelle/insider-vue"
     },
     {
-      "path": "../packages/enclosure-nuxt",
-      "name": "@passerelle/enclosure-nuxt"
+      "path": "./_e",
+      "name": "___EXAMPLES___"
     },
     {
-      "path": "../packages/insider-nuxt",
-      "name": "@passerelle/insider-nuxt"
+      "path": "../examples/enclosure-vue2",
+      "name": "#example/enclosure-vue2"
     },
     {
-      "path": "../packages/insider-nuxt",
-      "name": "@passerelle/insider-nuxt"
+      "path": "../examples/enclosure-vue3",
+      "name": "#example/enclosure-vue3"
     },
     {
-      "path": "../fixtures/playground-enclosure",
-      "name": "#fixtures/playground-enclosure"
+      "path": "../examples/insider-vue2",
+      "name": "#example/insider-vue2"
     },
     {
-      "path": "../fixtures/playground-insider",
-      "name": "#fixtures/playground-insider"
+      "path": "../examples/insider-vue3",
+      "name": "#example/insider-vue3"
     },
     {
-      "path": "../fixtures/playground-vue-components",
-      "name": "#fixtures/playground-vue-components"
+      "path": "./_f",
+      "name": "___FIXTURES___"
+    },
+    {
+      "path": "../fixtures/vue-components",
+      "name": "#fixtures/vue-components"
     }
   ],
   "settings": {
@@ -57,7 +61,8 @@
       "editor.rulers": [150],
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
-    "typescript.tsdk": "node_modules/typescript/lib"
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "liveServer.settings.multiRootWorkspaceName": "#root"
   },
   "extensions": {
     "recommendations": [

diff --git a/examples/enclosure-vue2/.yarnrc.yml b/examples/enclosure-vue2/.yarnrc.yml
@@ -0,0 +1,3 @@
+---
+nodeLinker: node-modules
+yarnPath: ../../.yarn/releases/yarn-3.6.3.cjs
diff --git a/examples/enclosure-vue2/index.html b/examples/enclosure-vue2/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app">
+      <App />
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/enclosure-vue2/package.json b/examples/enclosure-vue2/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "example-enclosure-vue2",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite . --port 5173",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@passerelle/enclosure-vue": "file:../../packages/enclosure-vue",
+    "@vue/composition-api": "^1.7.2",
+    "fixtures-vue-components": "file:../../fixtures/vue-components",
+    "vite": "^4.3.0",
+    "vite-plugin-vue2": "^2.0.3",
+    "vue": "^2.7.14",
+    "vue-router": "^3.6.5"
+  }
+}
diff --git a/examples/enclosure-vue2/src/App.vue b/examples/enclosure-vue2/src/App.vue
@@ -0,0 +1,35 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { RouterView } from 'vue-router'
+import Header from './components/Header.vue'
+import Playground from 'fixture-vue-component'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    Header,
+    Playground,
+    RouterView
+  }
+})
+</script>
+
+<template>
+  <div>
+    <section>
+      <Header />
+      <Playground mode="enclosure" />
+    </section>
+
+    <section>
+      <RouterView />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+section {
+  line-height: 1.5;
+  height: 95vh;
+}
+</style>
diff --git a/...e-nuxt/playground/src/assets/css/base.css → ...es/enclosure-vue2/src/assets/css/base.css b/...e-nuxt/playground/src/assets/css/base.css → ...es/enclosure-vue2/src/assets/css/base.css
diff --git a/...re-vue/playground/src/assets/css/main.css → ...es/enclosure-vue2/src/assets/css/main.css b/...re-vue/playground/src/assets/css/main.css → ...es/enclosure-vue2/src/assets/css/main.css
diff --git a/...losure-vue/playground/src/assets/logo.svg → examples/enclosure-vue2/src/assets/logo.svg b/...losure-vue/playground/src/assets/logo.svg → examples/enclosure-vue2/src/assets/logo.svg
diff --git a/...nuxt/playground/src/components/Header.vue → .../enclosure-vue2/src/components/Header.vue b/...nuxt/playground/src/components/Header.vue → .../enclosure-vue2/src/components/Header.vue
@@ -1,3 +1,15 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { RouterLink } from 'vue-router'
+
+export default defineComponent({
+  name: 'Header',
+  components: {
+    RouterLink
+  }
+})
+</script>
+
 <template>
   <header>
     <img
@@ -8,13 +20,13 @@
       height="125" />
 
     <div class="wrapper">
-      <h1>@passerelle/enclosure-nuxt</h1>
+      <h1>enclosure vue2</h1>
 
       <nav>
-        <nuxt-link to="/">Home</nuxt-link>
-        <nuxt-link to="/bridge/about">About</nuxt-link>
-        <nuxt-link to="/bridge/works">Works</nuxt-link>
-        <nuxt-link to="/bridge/contact">Contact</nuxt-link>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/bridge/about">About</RouterLink>
+        <RouterLink to="/bridge/works">Works</RouterLink>
+        <RouterLink to="/bridge/contact">Contact</RouterLink>
       </nav>
     </div>
   </header>

diff --git a/examples/enclosure-vue2/src/main.ts b/examples/enclosure-vue2/src/main.ts
@@ -0,0 +1,17 @@
+import './assets/css/main.css'
+
+// import Vue from 'vue/dist/vue.esm'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import App from './App.vue'
+import router from './router'
+
+Vue.use(VueRouter)
+
+new Vue({
+  el: '#app',
+  router,
+  render(h) {
+    return h(App)
+  }
+})
diff --git a/examples/enclosure-vue2/src/router/index.ts b/examples/enclosure-vue2/src/router/index.ts
@@ -0,0 +1,21 @@
+import VueRouter from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+import BridgeView from '../views/BridgeView.vue'
+
+const router = new VueRouter({
+  // history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: HomeView
+    },
+    {
+      path: '/bridge/:pathMatch(.*)*',
+      name: 'bridge',
+      component: BridgeView
+    }
+  ]
+})
+
+export default router
diff --git a/examples/enclosure-vue2/src/views/BridgeView.vue b/examples/enclosure-vue2/src/views/BridgeView.vue
@@ -0,0 +1,66 @@
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router/composables'
+import {
+  type ParentToChild,
+  type ChildToParent,
+  BridgeFrame
+} from '@passerelle/enclosure-vue'
+
+export default defineComponent({
+  components: {
+    BridgeFrame
+  },
+  setup() {
+    const route = useRoute()
+
+    const defaultPath = `http://localhost:5174${extractChildPath(route.path)}`
+
+    function extractChildPath(path: string): string {
+      const [, matchedPath] = /^\/bridge(\/.*?)$/.exec(path) ?? []
+      if (!matchedPath) {
+        throw new Error(`invalid path: ${path}`)
+      }
+      return matchedPath
+    }
+
+    const parentToChild: ParentToChild = (location) => {
+      return extractChildPath(location.path)
+    }
+
+    const childToParent: ChildToParent = ({ path, params }) => {
+      return { path: `/bridge${path}`, params }
+    }
+
+    const bridge = ref()
+
+    onMounted(() => {
+      // デバッグのためにわざと window を介してルートに communicator を公開している
+      ;(window as any).getCommunicator = () => bridge.value.getCommunicator()
+    })
+    return {
+      defaultPath,
+      parentToChild,
+      childToParent,
+      bridge
+    }
+  }
+})
+</script>
+
+<template>
+  <BridgeFrame
+    class="frame"
+    ref="bridge"
+    communicate-key="passerelle-playground"
+    :initial-src="defaultPath"
+    :to-child-path="parentToChild"
+    :to-parent-path="childToParent"
+    required-collab />
+</template>
+
+<style scoped>
+.frame {
+  border: 1px solid var(--color-border);
+}
+</style>
diff --git a/examples/enclosure-vue2/src/views/HomeView.vue b/examples/enclosure-vue2/src/views/HomeView.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    empty
+  </div>
+</template>
diff --git a/examples/enclosure-vue2/tsconfig.json b/examples/enclosure-vue2/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": ["../../tsconfig.json"],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/examples/enclosure-vue2/vite.config.ts b/examples/enclosure-vue2/vite.config.ts
@@ -0,0 +1,17 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+
+export default defineConfig({
+  mode: 'development',
+  base: '/',
+  plugins: [
+    createVuePlugin()
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})