feat: start registry

README.md

@@ -59,32 +59,33 @@ addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
 
 ### Using The Registry (TODO)
 
-The registry is a collection of compatible Nuxt Modules that integrate with Nuxt Scripts and one-off composables provided
-by the module.
+The registry is a collection of composables and Nuxt Modules that directly integrate with Nuxt Scripts.
 
-To use a script from the registry, simply use the composable or register them globally using the key. Consult the
+To use a script from the registry, simply use the composable. Consult the
 below table for the available scripts.
 
-| Key | Description | Composable | Source |
-| --- | --- | --- | --- |
-| `google-analytics` | Google Analytics | `useGoogleAnalytics` | Nuxt Third Party Capital |
-| `google-tag-manager` | Google Tag Manager | `useGoogleTagManager` | Nuxt Third Party Capital |
-| `hotjar` | Hotjar | `useHotjar` | Nuxt Third Party Capital |
-| `cloudflare-turnstile` | CloudFlare Turnstile | `useCloudflareTurnstile` | Nuxt Cloudflare Turnstile |
-| `intercom` | Intercom | `useIntercom` | Nuxt Scripts |
-| `facebook-pixel` | Facebook Pixel | `useFacebookPixel` |
-| `twitter-pixel` | Twitter Pixel | `useTwitterPixel` |
-| `linkedin-insight-tag` | LinkedIn Insight Tag | `useLinkedInInsightTag` |
-| `pinterest-tag` | Pinterest Tag | `usePinterestTag` |
-| `google-ads-conversion-tracking` | Google Ads Conversion Tracking | `useGoogleAdsConversionTracking` |
-| `google-ads-remarketing` | Google Ads Remarketing | `useGoogleAdsRemarketing` |
-| `segment` | Segment | `useSegment` |
-| `fathom-analytics` | Fathom Analytics | `useFathomAnalytics` |
-| `plausible-analytics` | Plausible Analytics | `usePlausibleAnalytics` |
-| `simple-analytics` | Simple Analytics | `useSimpleAnalytics` |
-| `umami-analytics` | Umami Analytics | `useUmamiAnalytics` |
-| `cloudflare-web-analytics` | Cloudflare Web Analytics | `useCloudflareWebAnalytics` |
-| `matomo` | Matomo | `useMatomo` |
+| Key      | Description | Composable | Source |
+|----------|  | --- | --- |
+| `cloudflare-web-analytics` | Cloudflare Web Analytics | `useScriptCloudflareWebAnalytics` | Core |
+| `confetti` | [JS Confetti](https://github.com/loonywizard/js-confetti) | `useScriptCloudflareAnalytics` | Core |
+| `facebook-pixel` | Facebook Pixel | `useScriptFacebookPixel` | Core |
+| `fathom-analytics` | Fathom Analytics | `useScriptFathomAnalytics` | Core |
+| `hotjar` | Hotjar | `useScriptHotjar` | Core |
+| `intercom` | Intercom | `useScriptIntercom` | Core |
+| `segment` | Segment | `useScriptSegment` | Core |
+| `google-analytics` | Google Analytics | `useGoogleAnalytics` | [Nuxt Third Party Capital](https://github.com/nuxt/third-party-capital) |
+| `google-tag-manager` | Google Tag Manager | `useGoogleTagManager` | [Nuxt Third Party Capital](https://github.com/nuxt/third-party-capital) |
+| `cloudflare-turnstile` | CloudFlare Turnstile | `useCloudflareTurnstile` | [Nuxt Cloudflare Turnstile](https://github.com/nuxt-modules/turnstile) |
+
+TODO | `twitter-pixel` | Twitter Pixel | `useTwitterPixel` |
+TODO | `pinterest-tag` | Pinterest Tag | `usePinterestTag` |
+TODO | `google-ads-conversion-tracking` | Google Ads Conversion Tracking | `useGoogleAdsConversionTracking` |
+TODO | `google-ads-remarketing` | Google Ads Remarketing | `useGoogleAdsRemarketing` |
+TODO | `plausible-analytics` | Plausible Analytics | `usePlausibleAnalytics` |
+TODO | `simple-analytics` | Simple Analytics | `useSimpleAnalytics` |
+TODO | `umami-analytics` | Umami Analytics | `useUmamiAnalytics` |
+TODO | `cloudflare-web-analytics` | Cloudflare Web Analytics | `useCloudflareWebAnalytics` |
+TODO | `matomo` | Matomo | `useMatomo` |
 
 ### Loading Scripts Globally
 

client/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.31",
-    "@nuxt/devtools-kit": "^1.1.1",
+    "@nuxt/devtools-kit": "^1.1.5",
     "@nuxt/devtools-ui-kit": "latest",
     "@nuxt/kit": "^3.11.1",
     "nuxt": "latest",

package.json

@@ -35,6 +35,7 @@
     "client:dev": "nuxi dev client --port 3300",
     "prepack": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt-module-build build && npm run client:build",
     "dev": "nuxi dev playground",
+    "dev:ssl": "nuxi dev playground --https",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "typecheck": "pnpm dlx vue-tsc --noEmit",
     "release": "pnpm build && bumpp && pnpm -r publish --no-git-checks",
@@ -50,30 +51,31 @@
     ]
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^1.1.1",
-    "@nuxt/devtools-ui-kit": "^1.1.1",
+    "@nuxt/devtools-kit": "^1.1.5",
+    "@nuxt/devtools-ui-kit": "^1.1.5",
     "@nuxt/kit": "^3.11.1",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
     "estree-walker": "^3.0.3",
     "h3": "^1.11.1",
     "magic-string": "^0.30.8",
-    "ofetch": "^1.3.3",
+    "ofetch": "^1.3.4",
     "ohash": "^1.1.3",
     "pathe": "^1.1.2",
     "pkg-types": "^1.0.3",
-    "shiki": "^1.2.0",
+    "shiki": "^1.2.1",
     "sirv": "^2.0.4",
     "ufo": "^1.5.3",
     "unplugin": "^1.10.0",
-    "unstorage": "^1.10.2"
+    "unstorage": "^1.10.2",
+    "valibot": "^0.30.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.8.3",
-    "@nuxt/devtools-ui-kit": "^1.1.1",
+    "@nuxt/devtools-ui-kit": "^1.1.5",
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/test-utils": "3.12.0",
-    "@unhead/schema": "^1.8.20",
+    "@unhead/schema": "^1.9.3",
     "acorn-loose": "^8.4.0",
     "bumpp": "^9.4.0",
     "eslint": "8.57.0",

playground/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "nuxi dev",
+    "dev": "nuxi dev --https",
     "build": "nuxi build",
     "generate": "nuxi generate"
   },

playground/pages/index.vue

@@ -1,156 +1,58 @@
 <script lang="ts" setup>
-import type { VueScriptInstance } from '@unhead/vue'
-import { ref, useHead, useScript } from '#imports'
-
-const state = ref<{ trigger: 'default' | 'manual' | 'idle', src: string }>({
-  trigger: 'default',
-  src: 'https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js',
-})
+import { useHead } from '#imports'
 
 useHead({
   title: 'Home',
 })
 
-const script = ref<VueScriptInstance<any> | null>(null)
-const scriptFns = ref<Function[]>([])
-
-async function submit() {
-  const instance = useScript(state.value.src, {
-    trigger: state.value.trigger === 'default' ? undefined : state.value.trigger,
-    use() {
-      return new window.JSConfetti()
-    },
-  })
-  script.value = instance.$script
-  instance.$script.then((script) => {
-    scriptFns.value = Object.keys(script)
-  })
-}
-function load() {
-  script.value?.load()
-}
-function reset() {
-  script.value?.remove()
-  script.value = null
-}
+const thirdParties = [
+  {
+    name: 'Cloudflare Web Analytics',
+    path: '/third-parties/cloudflare-web-analytics',
+  },
+  {
+    name: 'Facebook Pixel',
+    path: '/third-parties/facebook-pixel',
+  },
+  {
+    name: 'Fathom Analytics',
+    path: '/third-parties/fathom-analytics',
+  },
+  {
+    name: 'Hotjar',
+    path: '/third-parties/hotjar',
+  },
+  {
+    name: 'Intercom',
+    path: '/third-parties/intercom',
+  },
+  {
+    name: 'Segment',
+    path: '/third-parties/segment',
+  },
+]
 </script>
 
 <template>
   <div>
-    <div class="grid grid-cols-3 gap-10">
-      <div>
-        <h2 class="font-bold mb-5 text-xl flex items-center">
-          Custom Script
-        </h2>
-        <UForm
-          v-if="!script"
-          class="mt-5"
-          :state="state"
-          @submit="submit"
-        >
-          <UFormGroup
-            label="Script Source"
-            name="src"
-            class="mb-5"
-          >
-            <UInput
-              v-model="state.src"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Trigger"
-            name="trigger"
-            class="mb-5"
-          >
-            <USelectMenu
-              v-model="state.trigger"
-              :options="['default', 'idle', 'manual']"
-            />
-          </UFormGroup>
-
-          <UButton type="submit">
-            Create
-          </UButton>
-        </UForm>
-        <div v-else>
-          <div>
-            Status: {{ script.status }}
-          </div>
-          <UButton
-            v-if="script.status === 'awaitingLoad'"
-            class="block my-5"
-            @click="load"
-          >
-            Load {{ script.id }}
-          </UButton>
-          <div v-if="script.status === 'loaded'">
-            {{ scriptFns }}
-            <UButton
-              class="block my-5"
-              @click="() => doConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })"
-            >
-              addConfetti
-            </UButton>
-            <UButton
-              class="block my-5"
-              @click="reset"
-            >
-              Reset
-            </UButton>
-          </div>
-        </div>
-      </div>
+    <div>
       <div class="mb-10">
         <h2 class="font-bold mb-5 text-xl flex items-center">
           <Icon
-            name="carbon:analytics"
+            name="carbon:script"
             class="opacity-70 mr-2"
-          />Analytics
+          />Third Parties
         </h2>
-        <ul class="space-y-5">
-          <li>
-            <ULink
-              to="/analytics/fathom"
-              class="underline"
-            >
-              Fathom Analytics
-            </ULink>
-          </li>
-          <li>
+        <div class="grid grid-cols-3 gap-5">
+          <div v-for="(s, key) in thirdParties" :key>
             <ULink
-              to="/analytics/cloudflare"
+              :to="s.path"
               class="underline"
             >
-              Cloudflare Analytics
+              {{ s.name }}
             </ULink>
-          </li>
-        </ul>
-      </div>
-      <div>
-        <h2 class="font-bold mb-5 text-xl flex items-center">
-          <Icon
-            name="carbon:security"
-            class="opacity-70 mr-2"
-          />Captcha
-        </h2>
-        <ul class="space-y-5">
-          <li>
-            <ULink
-              to="/captcha/cloudflare-turnstile"
-              class="underline"
-            >
-              Cloudflare Turnstile
-            </ULink>
-          </li>
-          <li>
-            <ULink
-              to="/captcha/google-recaptcha"
-              class="underline"
-            >
-              Google Recaptcha
-            </ULink>
-          </li>
-        </ul>
+          </div>
+        </div>
       </div>
     </div>
   </div>