fix(runtime-utils): support options api data, computed + methods #963

inouetakuya · 2024-10-03T04:02:01Z

🔗 Linked issue

fixes #961

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

As described in #961, mountSuspended did not support the Options API data, computed, and methods, so we have fixed this to support them.

…, and methods

danielroe

thank you!

do we need to apply the same fixes to renderSuspended?

inouetakuya · 2024-10-04T01:03:25Z

debug: Comment out supporting options api in renderSuspended

-> Test fails.

$ pnpm prepack && pnpm test:examples
 WARN  Unsupported engine: wanted: {"node":">=18.20.4"} (current: {"node":"v18.19.0","pnpm":"9.11.0"})

> @nuxt/[email protected] prepack /Users/inouetakuya/src/github.com/inouetakuya/test-utils
> unbuild

ℹ Building test-utils                                                                                                             10:01:58
ℹ Cleaning dist directory: ./dist                                                                                                 10:01:58
  61├─ .nuxt/test/jy8ffo/output/server/chunks/_/error-500.mjs (4.77 kB) (2.02 kB gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/routes/renderer.mjs.map (960 B) (402 B gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/runtime.mjs (166 kB) (40.5 kB gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/runtime.mjs.map (6.18 kB) (1.04 kB gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/virtual/_virtual_spa-template.mjs (94 B) (100 B gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/chunks/virtual/_virtual_spa-template.mjs.map (112 B) (111 B gzip)
│   ├─ .nuxt/test/jy8ffo/output/server/index.mjs (291 B) (193 B gzip)
│   └─ .nuxt/test/jy8ffo/output/server/package.json (600 B) (299 B gzip)
  Listening on http://127.0.0.1:50352
│ [nitro] ✔ You can preview this build using node .nuxt/test/jy8ffo/output/server/index.mjs
│ Σ Total size: 1.69 MB (410 kB gzip)
│ > example-app-vitest-full@ test:happy-dom /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│ > VITEST_DOM_ENV=happy-dom pnpm test:unit --run
│ > example-app-vitest-full@ test:unit /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│ > vitest "--run"
│ From custom module!
│  RUN  v2.1.2 /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│ stdout | tests/nuxt/mock-vue-router.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mount-suspended.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-component-1.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.kuya/test-utils/examples/app-playwright/.nuxt/test/5jkthk/analyze/.…
│ stdout | tests/nuxt/routing.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/server.spec.ts:1 › test
  [Desktop Chrome] › basic.test.ts:17:1 › testing
│ stdout | tests/nuxt/mock-indexeddb.spec.tst
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/auto-import.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/auto-import-mock.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/render-suspended.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ tests/nuxt/auto-import.spec.ts  (3 tests) 9msuetakuya/src/github.com/inouetakuya/test-utils
│  ✓ tests/nuxt/mock-component-1.spec.ts  (1 test) 24msr test --filter example-app-cucumber
│  ✓ tests/nuxt/mock-indexeddb.spec.ts  (1 test) 28ms
│  ✓ tests/nuxt/auto-import-mock.spec.ts  (2 tests) 8ms
│  ✓ tests/nuxt/mock-vue-router.spec.ts  (1 test) 7ms
│  ✓ tests/nuxt/routing.spec.ts  (3 tests) 130ms
│  ✓ tests/nuxt/server.spec.ts  (4 tests) 83msxperimental-vm-modules node_modules/jest/bin/jest.js
│ stderr | tests/nuxt/render-suspended.spec.ts > renderSuspended > should render asyncData and other options api properties within nuxt su…
│ [Vue warn]: Unhandled error during execution of render function
│   at <OptionsApiPage > c.test.ts:17:1 › testing
│   at <RenderHelper> asic.test.ts:3:1 › test
│   at <Anonymous ref="VTU_COMPONENT" > › testing
│   at <VTUROOT>s transformed.
│  ✓ tests/nuxt/mount-suspended.spec.ts  (25 tests | 1 skipped) 172ms
│ stdout | tests/nuxt/mock-component-3.spec.ts-dom && pnpm test:jsdom && pnpm test:dev && pnpm test:types
│ <Suspense> is an experimental feature and its API will likely change.ub.com/inouetakuya/test-utils/examples/app-vitest-full
│ stdout | tests/nuxt/injected-value-component.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.m/inouetakuya/test-utils/examples/app-vitest-full
│  ✓ tests/nuxt/mock-component-3.spec.ts  (1 test) 18ms
│  ✓ tests/nuxt/injected-value-component.spec.ts  (1 test) 20ms
│ stdout | tests/nuxt/mount-component.spec.tscom/inouetakuya/test-utils/examples/app-vitest-full
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-nuxt-composable-1.spec.ts
│ <Suspense> is an experimental feature and its API will likely change./examples/app-vitest
│  ✓ tests/nuxt/mount-component.spec.ts  (1 test) 11ms
│ stdout | tests/nuxt/mock-component-2.spec.tss API will likely change.
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-component-expose-setup-state.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-nuxt-composable-3.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ tests/nuxt/mock-nuxt-composable-1.spec.ts  (1 test) 8ms
│  ✓ tests/nuxt/mock-component-expose-setup-state.spec.ts  (1 test) 9ms
│  ✓ tests/nuxt/mock-component-2.spec.ts  (1 test) 38ms
│  ✓ tests/nuxt/mock-nuxt-composable-3.spec.ts  (2 tests) 9ms
│ stdout | tests/nuxt/config.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ tests/nuxt/config.spec.ts  (1 test) 3ms
│  ✓ tests/unit/index.spec.ts  (1 test) 1ms
│  ✓ pages/index.vue  (1 test) 1ms
│  ❯ tests/nuxt/render-suspended.spec.ts  (12 tests | 1 failed) 5106ms
│    × renderSuspended > should render asyncData and other options api properties within nuxt suspense
│      → Test timed out in 5000ms.
│ If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
│ stdout | tests/nuxt/plugins.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│ stdout | tests/nuxt/mock-nuxt-composable-2.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ tests/nuxt/plugins.spec.ts  (1 test) 12ms
│  ✓ tests/nuxt/mock-nuxt-composable-2.spec.ts  (1 test) 11ms
│ ⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯
│  FAIL  tests/nuxt/render-suspended.spec.ts > renderSuspended > should render asyncData and other options api properties within nuxt susp…
│ Error: Test timed out in 5000ms.
│ If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".
│ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
│ ⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯
│ TypeError: _ctx.greetingInMethods is not a function
│  ❯ Proxy._sfc_render pages/other/options-api.vue:22:10
│ ⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯
│ Vitest caught 1 unhandled error during the test run.
│ This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
│      20|     </li>
│      21|     <li data-testid="greetingInMethods">
│      22|       {{ greetingInMethods() }}
│        |          ^
│      23|     </li>
│      24|     <li data-testid="returnData1">
│  ❯ Proxy.clonedComponent.render ../../dist/runtime-utils/index.mjs:264:39
│  ❯ renderComponentRoot ../../node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6365:16
│  ❯ ReactiveEffect.componentUpdateFn [as fn] ../../node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime…
│  ❯ ReactiveEffect.run ../../node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:226:19
│  ❯ setupRenderEffect ../../node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5322:5
│  ❯ ../../node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7064:9
│ This error originated in "tests/nuxt/render-suspended.spec.ts" test file. It doesn't mean the error was thrown inside the file itself, b…
│ The latest test that might've caused the error is "should render asyncData and other options api properties within nuxt suspense". It mi…
│ - The error was thrown, while Vitest was running this test.
│ - If the error occurred after the test had been completed, this was the last documented test before it was thrown.
│ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
│  Test Files  1 failed | 20 passed (21)
│       Tests  1 failed | 63 passed | 1 todo (65)
│      Errors  1 error
│    Start at  10:02:06
│    Duration  9.67s (transform 2.75s, setup 44.53s, collect 4.03s, tests 5.70s, environment 7.50s, prepare 8.42s)
│  ELIFECYCLE  Command failed with exit code 1.
│  ELIFECYCLE  Command failed with exit code 1.
└─ Failed in 13.3s at /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
examples/app-vitest test$ vitest run
│  RUN  v2.1.2 /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest
│ stdout | test/app.nuxt.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ test/app.nuxt.spec.ts  (1 test) 8ms
└─ Running...
/Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  example-app-vitest-full@ test: `pnpm test:happy-dom && pnpm test:jsdom && pnpm test:dev && pnpm test:types`
Exit status 1
examples/content test$ vitest run
└─ Running...
 ELIFECYCLE  Command failed with exit code 1.

This reverts commit ec52f6e.

inouetakuya · 2024-10-04T01:06:03Z

Revert "debug: Comment out supporting options api in renderSuspended"

-> Test succeeds 🆗

$ pnpm prepack && pnpm test:examples
 WARN  Unsupported engine: wanted: {"node":">=18.20.4"} (current: {"node":"v18.19.0","pnpm":"9.11.0"})

> @nuxt/[email protected] prepack /Users/inouetakuya/src/github.com/inouetakuya/test-utils
> unbuild

ℹ Building test-utils                                                                                                             10:04:02
ℹ Cleaning dist directory: ./dist                                                                                                 10:04:02
✔ Build succeeded for test-utils                                                                                                  10:04:07
[3 lines collapsed]
[10 lines collapsed]pendencies because vite config has changed
│ [nitro] ✔ Nuxt Nitro server built in 1773 ms
│ ℹ Vite client warmed up in 1ms
│ [nuxi] ℹ Dev server event: type="nuxt:internal:dev:ready" port=51194
│ ℹ Vite server warmed up in 676ms
│ PASS test/dev.e2e.spec.ts (23.224 s)
│ Test Suites: 3 passed, 3 total
│ Tests:       6 passed, 6 total
└─ Done in 25s 2 passed, 2 total
│ Time:        23.555 s
│ Ran all test suites.
examples/app-playwright test$ playwright test
[165 lines collapsed]
│   └─ .nuxt/test/ns92by/output/server/package.json (600 B) (299 B gzip)
  [Desktop Chrome] › basic.test.ts:3:1 › test
  [Desktop Chrome] › basic.test.ts:17:1 › testing
    2 passed (14.8s)
│ To open last HTML report run:
│   pnpm exec playwright show-report
└─ Done in 15.2s
examples/app-vitest test$ vitest run
[5 lines collapsed]
│ Listening on http://127.0.0.1:51205
│  ✓ test/server.e2e.spec.ts  (1 test) 13536ms
│  ✓ test/browser.e2e.spec.ts  (1 test) 14582ms
│ Listening on http://127.0.0.1:51217
│  ✓ test/generate.e2e.spec.ts  (1 test) 15428ms
│  ✓ test/dev.e2e.spec.ts  (1 test) 18003ms
│  Test Files  5 passed (5)form 2.03s, setup 41.96s, collect 4.27s, tests 932ms, environment 7.49s, prepare 8.74s)
│       Tests  5 passed (5)@ test:jsdom /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│    Start at  10:04:11
│    Duration  19.37s (transform 778ms, setup 2.01s, collect 2.15s, tests 61.56s, environment 272ms, prepare 982ms)-full
└─ Done in 22.7s
examples/app-vitest-full test$ pnpm test:happy-dom && pnpm test:jsdom && pnpm test:dev && pnpm test:types
[65 lines collapsed]
│  Test Files  21 passed (21)
[441 lines collapsed]sed | 1 todo (65)
│ [nuxt] Your project has pages but the <NuxtPage /> component has not been used. You might be using the <RouterView /> component instead,…
│ ✓ tests/nuxt/plugins.spec.ts  (1 test) 5ms
│ Test Files  20 passed (20)
│ Tests  63 passed | 1 todo (64)
│ Start at  10:04:40
│ Duration  6.60s (transform 1.22s, setup 33.35s, collect 1.39s, tests 499ms, environment 4.06s, prepare 6.40s)
│ > example-app-vitest-full@ test:types /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-vitest-full
│ > nuxi prepare && vue-tsc --noEmit
│ From custom module!
│ ✔ Types generated in .nuxt
└─ Done in 43.7sUsers/inouetakuya/src/github.com/inouetakuya/test-utils/examples/content
│ stdout | tests/index.spec.ts
│ <Suspense> is an experimental feature and its API will likely change./examples/app-vitest
│  ✓ tests/index.spec.ts  (1 test) 24ms
│  Test Files  1 passed (1)ntal feature and its API will likely change.
│       Tests  1 passed (1) (1 test) 8ms
│    Start at  10:04:29
│    Duration  2.98s (transform 1.21s, setup 1.54s, collect 343ms, tests 24ms, environment 140ms, prepare 420ms)
└─ Done in 8.7s
examples/i18n test$ vitest runnpm test:unit --run
└─ Running...
examples/module test$ vitest run
│  RUN  v2.1.2 /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/i18n
│ stdout | test/index.spec.ts
│ <Suspense> is an experimental feature and its API will likely change.
│  ✓ test/index.spec.ts  (1 test) 14ms
│  Test Files  1 passed (1)
│       Tests  1 passed (1)
│    Start at  10:04:34
│    Duration  1.17s (transform 442ms, setup 440ms, collect 84ms, tests 14ms, environment 129ms, prepare 317ms)
└─ Done in 4.7s
examples/module test$ vitest run
[2 lines collapsed]
│ Plugin injected by my-module!
│ Listening on http://127.0.0.1:51279
│ Plugin injected by my-module!
│ Listening on http://127.0.0.1:51285
│ Plugin injected by my-module!
│  ✓ test/basic.test.ts  (2 tests) 6250ms
│  Test Files  1 passed (1)
│       Tests  2 passed (2)
│    Start at  10:04:32
│    Duration  6.73s (transform 70ms, setup 0ms, collect 266ms, tests 6.25s, environment 0ms, prepare 51ms)
└─ Done in 7.1s
.                                        |  WARN  Unsupported engine: wanted: {"node":">=18.20.4"} (current: {"node":"v18.19.0","pnpm":"9.11.0"})

> example-app-cucumber@ test /Users/inouetakuya/src/github.com/inouetakuya/test-utils/examples/app-cucumber
> NODE_OPTIONS='--loader ts-node/esm' NODE_ENV=test cucumber-js

(node:6830) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("ts-node/esm", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6861) ExperimentalWarning: `--experimental-loader` may be removed in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; register("ts-node/esm", pathToFileURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)
Listening on http://127.0.0.1:51371
1 scenario (1 passed)
1 step (1 passed)
0m06.571s (executing steps: 0m00.676s)

inouetakuya · 2024-10-04T01:15:25Z

@danielroe

Thank you for your review!

#963 (review)

do we need to apply the same fixes to renderSuspended?

Yes, we need.

I added test for renderSuspended.

If there is no fix -> test fails
- fix(runtime-utils): support options api data, computed + methods #963 (comment)
if there are the fixes -> test succeeds
- fix(runtime-utils): support options api data, computed + methods #963 (comment)

danielroe

thank you 🙏

inouetakuya · 2024-10-07T07:07:28Z

@danielroe

I actually use this library for work. So I'd like to ask, when do you think the version that merges this pull request will be released? 🙏 🙏 🙏

danielroe · 2024-10-07T10:49:20Z

released! ✅

inouetakuya · 2024-10-07T11:28:43Z

Thank you so much!! 🙌

inouetakuya requested a review from danielroe as a code owner October 3, 2024 04:02

inouetakuya force-pushed the fix-961-mount-suspended-options-api-component branch from 712fe33 to c58a57b Compare October 3, 2024 04:21

fix(mount suspended): Support Options API's data, computed properties…

302bedb

…, and methods

inouetakuya force-pushed the fix-961-mount-suspended-options-api-component branch from c58a57b to 302bedb Compare October 3, 2024 06:01

[autofix.ci] apply automated fixes

ec64226

danielroe changed the title ~~fix(mount suspended): Support Options API's data, computed properties, and methods~~ fix(runtime-utils): support options api data, computed + methods Oct 3, 2024

Merge branch 'main' into fix-961-mount-suspended-options-api-component

c2fef55

danielroe reviewed Oct 3, 2024

View reviewed changes

inouetakuya added 2 commits October 4, 2024 09:47

test: Add test for renderSuspended Options API component

4fbb1db

debug: Comment out supporting options api in renderSuspended

ec52f6e

inouetakuya force-pushed the fix-961-mount-suspended-options-api-component branch from d4cd8ae to ec52f6e Compare October 4, 2024 00:54

Revert "debug: Comment out supporting options api in renderSuspended"

23b3f4f

This reverts commit ec52f6e.

inouetakuya requested a review from danielroe October 4, 2024 01:15

danielroe approved these changes Oct 4, 2024

View reviewed changes

danielroe merged commit 9ec23da into nuxt:main Oct 7, 2024
4 checks passed

github-actions bot mentioned this pull request Oct 7, 2024

v3.14.3 #941

Closed

inouetakuya deleted the fix-961-mount-suspended-options-api-component branch October 7, 2024 08:58

wattanx mentioned this pull request Oct 8, 2024

Mapped State from vuex is undefined #774

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(runtime-utils): support options api data, computed + methods #963

fix(runtime-utils): support options api data, computed + methods #963

inouetakuya commented Oct 3, 2024

danielroe left a comment

inouetakuya commented Oct 4, 2024

inouetakuya commented Oct 4, 2024 •

edited

Loading

inouetakuya commented Oct 4, 2024

danielroe left a comment

inouetakuya commented Oct 7, 2024

danielroe commented Oct 7, 2024

inouetakuya commented Oct 7, 2024

fix(runtime-utils): support options api data, computed + methods #963

fix(runtime-utils): support options api data, computed + methods #963

Conversation

inouetakuya commented Oct 3, 2024

🔗 Linked issue

❓ Type of change

📚 Description

danielroe left a comment

Choose a reason for hiding this comment

inouetakuya commented Oct 4, 2024

inouetakuya commented Oct 4, 2024 • edited Loading

inouetakuya commented Oct 4, 2024

danielroe left a comment

Choose a reason for hiding this comment

inouetakuya commented Oct 7, 2024

danielroe commented Oct 7, 2024

inouetakuya commented Oct 7, 2024

inouetakuya commented Oct 4, 2024 •

edited

Loading