add object support for +staticReplace (#2983)

Author: brillout

packages/vike/src/node/vite/plugins/pluginStaticReplace/applyStaticReplace.spec.ts

@@ -77,6 +77,15 @@ const staticReplaceVue: StaticReplace[] = [
     },
     remove: { arg: 2, prop: 'default' },
   },
+  {
+    env: 'server',
+    filter: 'vike-vue/useHydrated',
+    type: 'call',
+    match: {
+      function: 'import:vike-vue/useHydrated:useHydrated',
+    },
+    replace: { with: { value: false } },
+  },
 ]
 
 const staticReplaceSolid: StaticReplace[] = [

packages/vike/src/node/vite/plugins/pluginStaticReplace/applyStaticReplace.ts

@@ -182,6 +182,15 @@ function valueToAst(value: unknown): t.Expression {
   if (typeof value === 'string') return t.stringLiteral(value)
   if (typeof value === 'number') return t.numericLiteral(value)
   if (typeof value === 'boolean') return t.booleanLiteral(value)
+  if (Array.isArray(value)) {
+    return t.arrayExpression(value.map(valueToAst))
+  }
+  if (typeof value === 'object') {
+    const properties = Object.entries(value).map(([key, val]) => {
+      return t.objectProperty(t.identifier(key), valueToAst(val))
+    })
+    return t.objectExpression(properties)
+  }
   return t.callExpression(t.memberExpression(t.identifier('JSON'), t.identifier('parse')), [
     t.stringLiteral(JSON.stringify(value)),
   ])

packages/vike/src/node/vite/plugins/pluginStaticReplace/snapshots/useHydrated-react-after

@@ -0,0 +1,8 @@
+export function SomeComponent() {
+  const isHydrated = false;
+  if (isHydrated) {
+    return 'Hydrated!';
+  } else {
+    return 'SSR';
+  }
+}

packages/vike/src/node/vite/plugins/pluginStaticReplace/snapshots/useHydrated-react-before

@@ -0,0 +1,10 @@
+import { useHydrated } from 'vike-react/useHydrated'
+
+export function SomeComponent() {
+  const isHydrated = useHydrated()
+  if (isHydrated) {
+    return 'Hydrated!'
+  } else {
+    return 'SSR'
+  }
+}

packages/vike/src/node/vite/plugins/pluginStaticReplace/snapshots/useHydrated-vue-after

@@ -0,0 +1,10 @@
+export function SomeComponent() {
+  const isHydrated = {
+    value: false
+  };
+  if (isHydrated.value) {
+    return 'Hydrated!';
+  } else {
+    return 'SSR';
+  }
+}

packages/vike/src/node/vite/plugins/pluginStaticReplace/snapshots/useHydrated-vue-before

@@ -0,0 +1,10 @@
+import { useHydrated } from 'vike-vue/useHydrated'
+
+export function SomeComponent() {
+  const isHydrated = useHydrated()
+  if (isHydrated.value) {
+    return 'Hydrated!'
+  } else {
+    return 'SSR'
+  }
+}