feat: update siteKey dynamically (#15)

* chore: install & init * chore: fix typo * feat: add feature add siteKey dynamical * feat: dynamic siteKey init example * docs: update dynamic sitekey docs
Dongkyuuuu · Nov 5, 2024 · 1a2e3a4 · 1a2e3a4
1 parent 1031afa
commit 1a2e3a4
Show file tree

Hide file tree

Showing 16 changed files with 196 additions and 55 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,3 +1,5 @@
 {
-  "recommendations": ["arcanis.vscode-zipfs"]
+  "recommendations": [
+    "arcanis.vscode-zipfs"
+  ]
 }
diff --git a/.yarn/sdks/typescript/bin/tsc b/.yarn/sdks/typescript/bin/tsc
@@ -1,20 +1,32 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require typescript/bin/tsc
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
 // Defer to the real typescript/bin/tsc your application uses
-module.exports = absRequire(`typescript/bin/tsc`);
+module.exports = wrapWithUserWrapper(absRequire(`typescript/bin/tsc`));
diff --git a/.yarn/sdks/typescript/bin/tsserver b/.yarn/sdks/typescript/bin/tsserver
@@ -1,20 +1,32 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require typescript/bin/tsserver
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
 // Defer to the real typescript/bin/tsserver your application uses
-module.exports = absRequire(`typescript/bin/tsserver`);
+module.exports = wrapWithUserWrapper(absRequire(`typescript/bin/tsserver`));
diff --git a/.yarn/sdks/typescript/lib/tsc.js b/.yarn/sdks/typescript/lib/tsc.js
@@ -1,20 +1,32 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
     // Setup the environment to be able to require typescript/lib/tsc.js
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
 // Defer to the real typescript/lib/tsc.js your application uses
-module.exports = absRequire(`typescript/lib/tsc.js`);
+module.exports = wrapWithUserWrapper(absRequire(`typescript/lib/tsc.js`));
diff --git a/.yarn/sdks/typescript/lib/tsserver.js b/.yarn/sdks/typescript/lib/tsserver.js
@@ -1,15 +1,38 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
 const absRequire = createRequire(absPnpApiPath);
 
-const moduleWrapper = tsserver => {
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserver.js
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+const moduleWrapper = exports => {
+  return wrapWithUserWrapper(moduleWrapperFn(exports));
+};
+
+const moduleWrapperFn = tsserver => {
   if (!process.versions.pnp) {
     return tsserver;
   }
@@ -214,11 +237,11 @@ const moduleWrapper = tsserver => {
   return tsserver;
 };
 
-if (existsSync(absPnpApiPath)) {
-  if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/tsserver.js
-    require(absPnpApiPath).setup();
-  }
+const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10));
+// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well.
+// Ref https://github.com/microsoft/TypeScript/pull/55326
+if (major > 5 || (major === 5 && minor >= 5)) {
+  moduleWrapper(absRequire(`typescript`));
 }
 
 // Defer to the real typescript/lib/tsserver.js your application uses

diff --git a/.yarn/sdks/typescript/lib/tsserverlibrary.js b/.yarn/sdks/typescript/lib/tsserverlibrary.js
@@ -1,15 +1,38 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
 const absRequire = createRequire(absPnpApiPath);
 
-const moduleWrapper = tsserver => {
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
+    require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
+  }
+}
+
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+const moduleWrapper = exports => {
+  return wrapWithUserWrapper(moduleWrapperFn(exports));
+};
+
+const moduleWrapperFn = tsserver => {
   if (!process.versions.pnp) {
     return tsserver;
   }
@@ -214,11 +237,11 @@ const moduleWrapper = tsserver => {
   return tsserver;
 };
 
-if (existsSync(absPnpApiPath)) {
-  if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
-    require(absPnpApiPath).setup();
-  }
+const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10));
+// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well.
+// Ref https://github.com/microsoft/TypeScript/pull/55326
+if (major > 5 || (major === 5 && minor >= 5)) {
+  moduleWrapper(absRequire(`typescript`));
 }
 
 // Defer to the real typescript/lib/tsserverlibrary.js your application uses

diff --git a/.yarn/sdks/typescript/lib/typescript.js b/.yarn/sdks/typescript/lib/typescript.js
@@ -1,20 +1,32 @@
 #!/usr/bin/env node
 
 const {existsSync} = require(`fs`);
-const {createRequire} = require(`module`);
+const {createRequire, register} = require(`module`);
 const {resolve} = require(`path`);
+const {pathToFileURL} = require(`url`);
 
 const relPnpApiPath = "../../../../.pnp.cjs";
 
 const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
 const absRequire = createRequire(absPnpApiPath);
 
+const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
+const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
+
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/typescript.js
+    // Setup the environment to be able to require typescript
     require(absPnpApiPath).setup();
+    if (isPnpLoaderEnabled && register) {
+      register(pathToFileURL(absPnpLoaderPath));
+    }
   }
 }
 
-// Defer to the real typescript/lib/typescript.js your application uses
-module.exports = absRequire(`typescript/lib/typescript.js`);
+const wrapWithUserWrapper = existsSync(absUserWrapperPath)
+  ? exports => absRequire(absUserWrapperPath)(exports)
+  : exports => exports;
+
+// Defer to the real typescript your application uses
+module.exports = wrapWithUserWrapper(absRequire(`typescript`));
diff --git a/.yarn/sdks/typescript/package.json b/.yarn/sdks/typescript/package.json
@@ -2,5 +2,9 @@
   "name": "typescript",
   "version": "5.2.2-sdk",
   "main": "./lib/typescript.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "tsc": "./bin/tsc",
+    "tsserver": "./bin/tsserver"
+  }
 }
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ import { install } from "vue3-recaptcha-v2";
 
 createApp(App)
   .use(install, {
-    sitekey: "YOUT_SITE_KEY",
+    sitekey: "YOUR_SITE_KEY",
     cnDomains: false, // Optional, If you use in China, set this value true
   })
   .mount("#app");
@@ -40,12 +40,39 @@ import { install } from "vue3-recaptcha-v2";
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(install, {
-    sitekey: "YOUT_SITE_KEY",
+    sitekey: "YOUR_SITE_KEY",
     cnDomains: false,
   });
 });
 ```
 
+### Dynamic SiteKey
+
+If you want to add siteKey dynamically, follow this step.
+
+**IMPORTANT::: The reCAPTCHA widget is rendered once, so changes to the siteKey after rendering will not be reflected.**
+
+```typescript
+import { createApp } from "vue";
+import App from "./App.vue";
+
+import { install } from "vue3-recaptcha-v2";
+
+createApp(App)
+  .use(install) // Do not add siteKey when initialize app
+  .mount("#app");
+```
+
+```vue
+<script setup lang="ts">
+import { RecaptchaV2 } from "vue3-recaptcha-v2";
+</script>
+
+<template>
+  <RecaptchaV2 :sitekey="YOUR_SITE_KEY" />
+</template>
+```
+
 More detail about install options, you can check this [Install Options](#install-options)
 
 ## Usage
@@ -61,7 +88,7 @@ import { RecaptchaV2 } from "vue3-recaptcha-v2";
 const handleWidgetId = (widgetId: number) => {
   console.log("Widget ID: ", widgetId);
 };
-const handleErrorCalback = () => {
+const handleErrorCallback = () => {
   console.log("Error callback");
 };
 const handleExpiredCallback = () => {
@@ -75,7 +102,7 @@ const handleLoadCallback = (response: unknown) => {
 <template>
   <RecaptchaV2
     @widget-id="handleWidgetId"
-    @error-callback="handleErrorCalback"
+    @error-callback="handleErrorCallback"
     @expired-callback="handleExpiredCallback"
     @load-callback="handleLoadCallback"
   />

diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { RecaptchaV2 } from "../../dist";
 
-const handleWidgetId = (widgetId: string) => {
+const siteKey = ref("");
+
+const handleWidgetId = (widgetId: number) => {
   console.log("Widget ID: ", widgetId);
 };
-const handleErrorCalback = () => {
+const handleErrorCallback = () => {
   console.log("Error callback");
 };
 const handleExpiredCallback = () => {
@@ -13,13 +16,19 @@ const handleExpiredCallback = () => {
 const handleLoadCallback = (response: unknown) => {
   console.log("Load callback", response);
 };
+
+const handleChangeSiteKey = () => {
+  siteKey.value = "12312323123";
+};
 </script>
 
 <template>
   <div>
+    <button @click="handleChangeSiteKey">Change</button>
     <RecaptchaV2
+      :sitekey="siteKey"
       @widget-id="handleWidgetId"
-      @error-callback="handleErrorCalback"
+      @error-callback="handleErrorCallback"
       @expired-callback="handleExpiredCallback"
       @load-callback="handleLoadCallback"
     />

diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -4,8 +4,4 @@ import { install } from "../../dist";
 
 const app = createApp(App);
 
-app
-  .use(install, {
-    sitekey: "",
-  })
-  .mount("#app");
+app.use(install).mount("#app");