fix: fix axios incompatible with edge runtime (#357)

DanSnow · web-flow · commit 439746cb2a21 · 2024-04-09T15:40:36.000+08:00
diff --git a/package.json b/package.json
@@ -56,12 +56,12 @@
     "uuid": "^9.0.1",
     "vite": "^4.5.3",
     "vite-plugin-css-injected-by-js": "^3.5.0",
-    "vue-instantsearch": "^4.13.2",
+    "vue-instantsearch": "^4.15.0",
     "vue3-lazy-hydration": "^1.2.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.12.2",
-    "@moonrepo/cli": "1.23.3",
+    "@antfu/eslint-config": "2.13.0",
+    "@moonrepo/cli": "1.23.4",
     "@nuxt/image": "1.0.0-rc.1",
     "@nuxtjs/tailwindcss": "6.8.0",
     "@rollup/plugin-virtual": "3.0.2",
diff --git a/packages/karbon/moon.yml b/packages/karbon/moon.yml
@@ -4,6 +4,7 @@ dependsOn:
   - code-highlight
   - custom-field
   - jose-browser
+  - typesense-xior
 
 tasks:
   build:
diff --git a/packages/karbon/package.json b/packages/karbon/package.json
@@ -47,7 +47,6 @@
   "dependencies": {
     "@apollo/client": "^3.9.10",
     "@babel/runtime": "^7.24.4",
-    "@haverstack/axios-fetch-adapter": "0.8.0",
     "@iframely/embed.js": "^1.10.3",
     "@noble/ciphers": "^0.4.1",
     "@nuxt/devalue": "^2.0.2",
@@ -61,13 +60,13 @@
     "@storipress/code-highlight": "^0.0.3",
     "@storipress/custom-field": "^1.1.7",
     "@storipress/jose-browser": "^1.1.5",
+    "@storipress/typesense-xior": "workspace:^",
     "@storipress/vue-advertising": "^1.1.0",
     "@vueuse/core": "^10.1.2",
     "@vueuse/head": "^1.1.26",
     "@vueuse/math": "^10.1.2",
     "@vueuse/nuxt": "^10.1.2",
     "@zhead/schema": "^1.1.0",
-    "axios": "0.26.1",
     "chalk": "^5.3.0",
     "cross-fetch": "^4.0.0",
     "defu": "^6.1.4",
@@ -90,7 +89,7 @@
     "lodash.truncate": "^4.4.2",
     "minimist": "^1.2.8",
     "node-fetch-native": "^1.4.1",
-    "node-html-parser": "^6.1.12",
+    "node-html-parser": "^6.1.13",
     "nuxt-link-checker": "^2.1.10",
     "nuxt-schema-org": "^2.2.0",
     "nuxt-simple-robots": "^3.1.2",
@@ -124,7 +123,7 @@
     "vite-plugin-css-injected-by-js": "^3.5.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vue": "^3.3.13",
-    "vue-instantsearch": "^4.13.2",
+    "vue-instantsearch": "^4.15.0",
     "vue-router": "^4.2.5",
     "vue3-lazy-hydration": "^1.2.1",
     "zod": "^3.22.4",
@@ -160,10 +159,10 @@
     "tsx": "4.7.2",
     "typescript": "5.4.4",
     "vitest": "0.34.6",
-    "zx": "8.0.0"
+    "zx": "8.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "gitHead": "8df1f4d5837a7e2ddbff6cc79f5fec256c34a394"
-}
+}
diff --git a/packages/karbon/src/module.ts b/packages/karbon/src/module.ts
@@ -59,7 +59,7 @@ declare module '#app' {
 }
 
 // reference: https://github.com/harlan-zw/nuxt-simple-sitemap/blob/324719dff6bf5c4214a093adbac4d5105d35bcb3/src/module.ts#L236
-declare module 'nitropack/dist/runtime/types' {
+declare module 'nitropack' {
   interface NitroRuntimeHooks {
     'karbon:request': (ctx: RequestContext) => void
     'karbon:response': (ctx: ResponseContext) => void
diff --git a/packages/karbon/src/runtime/composables/front-page.ts b/packages/karbon/src/runtime/composables/front-page.ts
@@ -45,7 +45,6 @@ if (import.meta.hot) {
 
 export function getAllArticles(): Promise<UseArticleReturnWithURL[]> &
   AsyncData<UseArticleReturnWithURL[], true | null> {
-  // @ts-expect-error unable to modal this type
   return useResourceList('article', {
     key: 'all',
     transform: (data) => {
@@ -62,7 +61,7 @@ export function getAllArticles(): Promise<UseArticleReturnWithURL[]> &
 }
 
 export const useGetAllArticles = useEventOnce(() => {
-  const promise = getAllArticles()
+  const promise = getAllArticles() as AsyncData<UseArticleReturnWithURL[], unknown>
   onServerPrefetch(() => promise)
   return promise
 })
diff --git a/packages/karbon/src/runtime/composables/typesense-client.ts b/packages/karbon/src/runtime/composables/typesense-client.ts
@@ -1,14 +1,11 @@
-import { SearchClient } from 'typesense'
-import axios from 'axios'
-import * as adapter from '@haverstack/axios-fetch-adapter'
+import { SearchClient } from '@storipress/typesense-xior'
 import { getStoripressConfig } from './storipress-base-client'
 
 let typesenseClient: SearchClient
 
 export function useTypesenseClient() {
   if (typesenseClient) return typesenseClient
 
-  axios.defaults.adapter = getAdapter()
   const storipress = getStoripressConfig()
   typesenseClient = new SearchClient({
     nodes: [
@@ -77,13 +74,3 @@ export function getSearchQuery(page = 1, filter: TypesenseFilter = {}) {
     include_fields: propertiesToKeep.join(','),
   }
 }
-
-// workaround for package issue
-function getAdapter() {
-  const createFetchAdapter = (adapter.default as any).createFetchAdapter
-  if (typeof createFetchAdapter === 'function') {
-    return createFetchAdapter()
-  }
-
-  return adapter.createFetchAdapter()
-}
diff --git a/packages/karbon/src/runtime/lib/split-article.ts b/packages/karbon/src/runtime/lib/split-article.ts
@@ -1,4 +1,3 @@
-import type { Element } from 'parse5/dist/tree-adapters/default'
 import { parseFragment, serializeOuter } from 'parse5'
 
 export interface NormalSegment {
@@ -28,12 +27,12 @@ export function splitArticle(source: string): Segment[] {
 
   const fragment = parseFragment(source)
   const segments = fragment.childNodes.map((_segment) => {
-    const segment = _segment as Element
+    const segment = _segment
     const DATA_FORMAT = 'data-format'
-    const format: { name: string; value: string } | undefined = segment.attrs?.find(
+    const format: { name: string; value: string } | undefined = (segment as any).attrs?.find(
       ({ name }: { name: string }) => name === DATA_FORMAT,
     )
-    const type = format?.value || segment.tagName
+    const type = format?.value || (segment as any).tagName
 
     return { id: 'normal' as const, type: type || 'div', html: serializeOuter(segment) }
   })
diff --git a/packages/karbon/tsconfig.json b/packages/karbon/tsconfig.json
@@ -1,4 +1,7 @@
 {
   "extends": "./playground/.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "Bundler"
+  },
   "include": ["./src/**/*", "./playground/**/*.ts"]
 }
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -63,7 +63,7 @@
     "uuid": "^9.0.1",
     "vite": "^4.5.3",
     "vite-plugin-css-injected-by-js": "^3.5.0",
-    "vue-instantsearch": "^4.13.2",
+    "vue-instantsearch": "^4.15.0",
     "vue3-lazy-hydration": "^1.2.1"
   },
   "devDependencies": {
diff --git a/packages/typesense-xior/README.md b/packages/typesense-xior/README.md
@@ -0,0 +1,3 @@
+# typesense-xior
+
+Rebundle [typesense](https://github.com/typesense/typesense-js) client with [xior](https://github.com/suhaotian/xior) to make it compatible with edge runtime like Cloudflare worker, Vercel
diff --git a/packages/typesense-xior/moon.yml b/packages/typesense-xior/moon.yml
@@ -0,0 +1,8 @@
+tasks:
+  build:
+    command: vite build
+    inputs:
+      - src/**/*
+      - vite.config.ts
+    outputs:
+      - dist/**/*
diff --git a/packages/typesense-xior/package.json b/packages/typesense-xior/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@storipress/typesense-xior",
+  "type": "module",
+  "version": "1.8.1",
+  "packageManager": "yarn@4.1.1",
+  "files": [
+    "./dist/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/typesense-xior.d.ts",
+      "import": "./dist/typesense-xior.js"
+    }
+  },
+  "scripts": {
+    "build": "moon run build",
+    "prepack": "moon run build"
+  },
+  "dependencies": {
+    "typesense": "1.8.1",
+    "xior": "0.3.9"
+  },
+  "devDependencies": {
+    "@moonrepo/cli": "1.23.4",
+    "builtin-modules": "^3.3.0",
+    "vite": "^5.2.8"
+  }
+}
diff --git a/packages/typesense-xior/public/typesense-xior.d.ts b/packages/typesense-xior/public/typesense-xior.d.ts
@@ -0,0 +1,2 @@
+export * from 'typesense'
+export { default } from 'typesense'
diff --git a/packages/typesense-xior/src/index.ts b/packages/typesense-xior/src/index.ts
@@ -0,0 +1,2 @@
+export * from 'typesense/src/Typesense'
+export { default } from 'typesense/src/Typesense'
diff --git a/packages/typesense-xior/src/xior.ts b/packages/typesense-xior/src/xior.ts
@@ -0,0 +1,6 @@
+import type { XiorRequestConfig } from 'xior'
+import axios from 'xior'
+
+export default (requestConfig: XiorRequestConfig) => {
+  return axios.request(requestConfig)
+}
diff --git a/packages/typesense-xior/tsconfig.json b/packages/typesense-xior/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    /* AND if you're building for a library in a monorepo: */
+    "composite": true,
+    "target": "es2022",
+    /* If your code runs in the DOM: */
+    /* If your code doesn't run in the DOM: */
+    "lib": ["es2022"],
+    "moduleDetection": "force",
+    "baseUrl": ".",
+    /* If NOT transpiling with TypeScript: */
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    /* Strictness */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    /* AND if you're building for a library: */
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    /* Base Options: */
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*", "tsup.config.ts"]
+}
diff --git a/packages/typesense-xior/vite.config.ts b/packages/typesense-xior/vite.config.ts
@@ -0,0 +1,24 @@
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import builtin from 'builtin-modules'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      axios: path.join(__dirname, './src/xior.ts'),
+    },
+  },
+  build: {
+    minify: false,
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: builtin as string[],
+    },
+  },
+})
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ declare module '#app' {`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`// reference: https://github.com/harlan-zw/nuxt-simple-sitemap/blob/324719dff6bf5c4214a093adbac4d5105d35bcb3/src/module.ts#L236`
`62`		`-declare module 'nitropack/dist/runtime/types' {`
	`62`	`+declare module 'nitropack' {`
`63`	`63`	`interface NitroRuntimeHooks {`
`64`	`64`	`'karbon:request': (ctx: RequestContext) => void`
`65`	`65`	`'karbon:response': (ctx: ResponseContext) => void`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": "./playground/.nuxt/tsconfig.json",`
	`3`	`+ "compilerOptions": {`
	`4`	`+ "moduleResolution": "Bundler"`
	`5`	`+ },`
`3`	`6`	`"include": ["./src/*/", "./playground/*/.ts"]`
`4`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# typesense-xior`
	`2`	`+`
	`3`	`+Rebundle [typesense](https://github.com/typesense/typesense-js) client with [xior](https://github.com/suhaotian/xior) to make it compatible with edge runtime like Cloudflare worker, Vercel`