feat: add devtools and client build scripts (#48)

* feat: add devtools and client build scripts

* fix: getMyModuleOptions

* fix: lint issues

* feat: update okuPergel devtools configuration

* Update baseURL and package names

eslint.config.js

@@ -16,6 +16,7 @@ export default antfu(
       '**/.DS_Store',
       '**/.vscode',
       '**/**.yml',
+      '**/**.md',
     ],
   },
   {

package.json

@@ -29,17 +29,13 @@
     "@types/node": "^20.10.0",
     "bumpp": "^9.2.0",
     "eslint": "^8.55.0",
+    "json-editor-vue": "^0.11.2",
     "lint-staged": "^15.1.0",
     "simple-git-hooks": "^2.9.0",
     "typescript": "^5.3.2",
     "vite": "5.0.4",
     "vitest": "^0.34.6"
   },
-  "resolutions": {
-    "pergel": "workspace:*",
-    "vite": "5.0.4",
-    "vue": "3.3.9"
-  },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
   },

packages/nuxt/client/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

packages/nuxt/client/components/ModuleAuthorNote.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <NTip
+    n="teal"
+    class="py-4"
+  >
+    <p class="font-bold">
+      Note for module authors:
+    </p>
+    Nuxt DevTools is in early preview and the API is subject to change.
+    Which means the setup in this template is only presenting the current state of the API.
+    We suggest following closely to the changes in the <NLink
+      href="https://github.com/nuxt/devtools"
+      target="_blank"
+    >
+      nuxt/devtools
+    </NLink> repository.<br>
+    The UI components are coming from <NLink
+      href="https://github.com/nuxt/devtools/tree/main/packages/devtools-ui-kit"
+      target="_blank"
+    >
+      @nuxt/devtools-ui-kit
+    </NLink>.
+  </NTip>
+</template>

packages/nuxt/client/components/StateEditor.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import JsonEditorVue from 'json-editor-vue'
+
+const props = defineProps<{
+  name?: string
+  open?: boolean
+  state?: any
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const isOpen = useVModel(props, 'open', emit, { passive: true })
+const colorMode = useColorMode()
+const proxy = ref()
+
+const state = useState(props.name)
+if (props.state)
+  proxy.value = JSON.parse(JSON.stringify(props.state))
+else if (typeof props.state === 'number' || typeof props.state !== 'string')
+  proxy.value = props.state
+
+const watcher = watchPausable(
+  proxy,
+  (value) => {
+    if (typeof value !== 'number' && typeof value !== 'string')
+      deepSync(value, props.state)
+    else
+      state.value = value
+  },
+  { deep: true },
+)
+
+function deepSync(from: any, to: any) {
+  for (const key in from) {
+    if (from[key] === null)
+      to[key] = null
+    else if (Array.isArray(from[key]))
+      to[key] = from[key].slice()
+    else if (typeof from[key] === 'object')
+      deepSync(from[key], to[key])
+    else
+      to[key] = from[key]
+  }
+}
+
+async function refresh() {
+  watcher.pause()
+  proxy.value = JSON.parse(JSON.stringify(props.state))
+  await nextTick()
+  watcher.resume()
+}
+</script>
+
+<template>
+  <div class="state-editor-details" :open="!name ? true : isOpen">
+    <div flex="~ gap2" select-none items-center px4>
+      <button v-if="name" flex="~" cursor-pointer items-center :class="isOpen ? '' : 'op50'" @click="isOpen = !isOpen">
+        <div i-carbon-chevron-right transition :class="isOpen ? 'rotate-90 op0' : ''" />
+        <code px3 py1 font-mono :class="isOpen ? 'bg-[#8881] rounded-t' : 'rounded hover:bg-active'">{{ name }}</code>
+      </button>
+      <slot name="actions" v-bind="{ isOpen, name, state }" />
+      <template v-if="isOpen">
+        <NButton
+          v-tooltip.bottom="'Refresh View'" title="Refresh View" icon="carbon-renew" :border="false"
+          @click="refresh"
+        />
+        <DataSchemaButton v-if="proxy" :getter="() => ({ name, input: JSON.stringify(proxy) })" />
+      </template>
+    </div>
+    <template v-if="isOpen || !name">
+      <JsonEditorVue
+        v-model="proxy" v-bind="$attrs" class="json-editor-vue" :class="[
+          colorMode.value === 'dark' ? 'jse-theme-dark' : '',
+          name ? '' : '',
+        ]" :main-menu-bar="false" :navigation-bar="false" :status-bar="false" :read-only="readonly" :indentation="2"
+        :tab-size="2"
+      />
+    </template>
+  </div>
+</template>

packages/nuxt/client/nuxt.config.ts

@@ -0,0 +1,16 @@
+import { resolve } from 'pathe'
+
+export default defineNuxtConfig({
+  ssr: false,
+  modules: [
+    '@nuxt/devtools-ui-kit',
+  ],
+  nitro: {
+    output: {
+      publicDir: resolve(__dirname, '../dist/client'),
+    },
+  },
+  app: {
+    baseURL: '/__pergel',
+  },
+})

packages/nuxt/client/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "pergel-client",
+  "private": true
+}

packages/nuxt/client/pages/index.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onDevtoolsClientConnected, useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
+import type { ClientFunctions, ServerFunctions } from '../../src/rpc-types'
+
+const client = useDevtoolsClient()
+onDevtoolsClientConnected(async (client) => {
+  const rpc = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>('pergel-rpc', {
+    showNotification: (message) => {
+      console.log('showNotification')
+      console.log('showNotification', message)
+    },
+  })
+  const dd = await rpc.getMyModuleOptions()
+  console.log(dd)
+})
+</script>
+
+<template>
+  <NSectionBlock
+    icon="carbon-3d-mpr-toggle"
+    text="Active Modules"
+    container-class="grid grid-cols-minmax-400px gap3 px4"
+    :padding="false"
+    description="Total modules: "
+  >
+    asdasdas
+  </NSectionBlock>
+  <div class="relative p-10 n-bg-base flex flex-col h-screen">
+    <h1 class="text-3xl font-bold">
+      Pergel Module
+    </h1>
+    <div class="opacity-50 mb-4">
+      Powered by oku
+    </div>
+    <div
+      v-if="client"
+      class="flex flex-col gap-2"
+    >
+      <NTip
+        n="green"
+        icon="carbon-checkmark"
+      >
+        Nuxt DevTools is connected
+      </NTip>
+      <div>
+        The current app is using
+        <code class="text-green">vue@{{ client.host.nuxt.vueApp.version }}</code>
+      </div>
+      <div>
+        <NButton
+          n="green"
+          class="mt-4"
+          @click="client!.host.devtools.close()"
+        >
+          Close DevTools
+        </NButton>
+      </div>
+    </div>
+    <div v-else>
+      <NTip n="yellow">
+        Failed to connect to the client. Did you open this page inside Nuxt DevTools?
+      </NTip>
+    </div>
+
+    <NuxtLink
+      to="/s3"
+      class="absolute top-0 right-0 p-4"
+    >
+      Go to S3
+    </NuxtLink>
+
+    <div class="flex-auto" />
+    <ModuleAuthorNote class="mt-5 " />
+  </div>
+</template>

packages/nuxt/client/pages/s3.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
+
+const client = useDevtoolsClient()
+</script>
+
+<template>
+  <div class="relative p-10 n-bg-base flex flex-col h-screen">
+    <h1 class="text-3xl font-bold">
+      My Module
+    </h1>
+    <div class="opacity-50 mb-4">
+      Nuxt DevTools Integration
+    </div>
+    <div v-if="client" class="flex flex-col gap-2">
+      <NTip n="green" icon="carbon-checkmark">
+        Nuxt DevTools is connected
+      </NTip>
+      <div>
+        The current app is using
+        <code class="text-green">vue@{{ client.host.nuxt.vueApp.version }}</code>
+      </div>
+      <div>
+        <NButton n="green" class="mt-4" @click="client!.host.devtools.close()">
+          Close DevTools
+        </NButton>
+      </div>
+    </div>
+    <div v-else>
+      <NTip n="yellow">
+        Failed to connect to the client. Did you open this page inside Nuxt DevTools?
+      </NTip>
+    </div>
+
+    <div class="flex-auto" />
+    <ModuleAuthorNote class="mt-5 " />
+  </div>
+</template>

packages/nuxt/client/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

packages/nuxt/package.json

@@ -25,19 +25,25 @@
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build build",
+    "prepack": "nuxt-module-build build && npm run client:build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "build": "nuxt-module-build build",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare client",
     "test": "vitest run",
-    "test:watch": "vitest watch"
+    "test:watch": "vitest watch",
+    "client:build": "nuxi generate client",
+    "client:dev": "nuxi dev client --port 3300"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.8.2"
+    "@nuxt/devtools-kit": "^1.0.5",
+    "@nuxt/kit": "^3.8.2",
+    "sirv": "^2.0.3"
   },
   "devDependencies": {
-    "@nuxt/devtools": "latest",
+    "@iconify-json/carbon": "^1.1.24",
+    "@nuxt/devtools": "^1.0.5",
+    "@nuxt/devtools-ui-kit": "^1.0.5",
     "@nuxt/module-builder": "^0.5.4",
     "@nuxt/schema": "^3.8.2",
     "@nuxt/test-utils": "^3.8.1",

packages/nuxt/playground/nuxt.config.ts

@@ -1,5 +1,47 @@
+import { resolve } from 'node:path'
+import { defineNuxtModule } from '@nuxt/kit'
+import { startSubprocess } from '@nuxt/devtools-kit'
+
 export default defineNuxtConfig({
-  modules: ['../src/module'],
-  myModule: {},
-  devtools: { enabled: true },
+  modules: [
+    '@nuxt/devtools',
+    /**
+     * My module
+     */
+    '../src/module',
+    /**
+     * Start a sub Nuxt Server for developing the client
+     *
+     * The terminal output can be found in the Terminals tab of the devtools.
+     */
+    defineNuxtModule({
+      setup(_, nuxt) {
+        if (!nuxt.options.dev)
+          return
+
+        const subprocess = startSubprocess(
+          {
+            command: 'npx',
+            args: ['nuxi', 'dev', '--port', '3300'],
+            cwd: resolve(__dirname, '../client'),
+          },
+          {
+            id: 'pergel:client',
+            name: 'My Module Client Dev',
+          },
+        )
+
+        subprocess.getProcess().stdout?.on('data', (data) => {
+          console.log(` sub: ${data.toString()}`)
+        })
+
+        process.on('exit', () => {
+          subprocess.terminate()
+        })
+      },
+    }),
+  ],
+  pergel: {
+    devtools: true,
+  },
 })