Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(playground): update dependencies and init #2849

Open
wants to merge 1 commit into
base: v2
Choose a base branch
from
Open

chore(playground): update dependencies and init #2849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions packages/online-playground/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,25 @@
# SFC Playground

This is continuously deployed at [https://play.vuejs.org](https://play.vuejs.org).
This is continuously deployed at [https://play.pinia.vuejs.org/](https://play.pinia.vuejs.org).

## Run Locally in Dev

In repo root:

```sh
pnpm dev-sfc
pnpm -F @pinia/online-playground dev
```

## Build for Prod

In repo root

```sh
pnpm build-sfc-playground
pnpm -F @pinia/online-playground build
```

Preview the build

```sh
pnpm -F @pinia/online-playground serve
```
5 changes: 3 additions & 2 deletions packages/online-playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@pinia/playground",
"name": "@pinia/online-playground",
"version": "0.0.0",
"type": "module",
"private": true,
Expand All @@ -11,10 +11,11 @@
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"execa": "^9.5.1",
"typescript": "^5.7.2",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this? ts is installed at the root to make sure only one version is used (currently 5.6 because other things break)

"vite": "^6.0.2"
},
"dependencies": {
"@vue/repl": "^3.0.0",
"@vue/repl": "^4.4.2",
"file-saver": "^2.0.5",
"jszip": "^3.10.1",
"pinia": "workspace:*",
Expand Down
79 changes: 45 additions & 34 deletions packages/online-playground/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<script setup lang="ts">
import Header from './Header.vue'
import { Repl, ReplStore, SFCOptions, ReplProps } from '@vue/repl'
import { Repl, useStore, useVueImportMap, SFCOptions, ReplProps } from '@vue/repl'
import Monaco from '@vue/repl/monaco-editor'
import { ref, watchEffect, onMounted, provide } from 'vue'
import { computed, ref, watchEffect, onMounted, provide } from 'vue'
import { AppVue, PiniaVersionKey, counterTs } from './defaults'

const setVH = () => {
Expand All @@ -19,15 +19,47 @@ if (hash.startsWith('__DEV__')) {
useDevMode.value = true
}

// TODO: we should fetch the latest version and set it by default here
const store = new ReplStore({
serializedState: hash,
defaultVueRuntimeURL:
'https://cdn.jsdelivr.net/npm/@vue/[email protected]/dist/runtime-dom.esm-browser.js',
defaultVueServerRendererURL:
'https://cdn.jsdelivr.net/npm/@vue/[email protected]/dist/server-renderer.esm-browser.js',
const {
importMap: builtinImportMap,
vueVersion,
productionMode,
} = useVueImportMap({
runtimeDev: 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.runtime.esm-browser.js',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We actually really need to fetch the latest version from npm and use that specific tag. We cannot use @3 as a default because the idea is that a link should always work or fail the same way

runtimeProd: 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.runtime.esm-browser.prod.js',
serverRenderer: 'https://cdn.jsdelivr.net/npm/@vue/server-renderer@3/dist/server-renderer.esm-browser.js',
})

const store = useStore(
{
// pre-set import map
builtinImportMap: computed(() => ({
imports: {
...builtinImportMap.value.imports,
...(import.meta.env.PROD
? {
pinia: '/pinia.esm-browser.js',
'@vue/devtools-api': 'https://cdn.jsdelivr.net/npm/@vue/[email protected]/lib/esm/index.js',
// Latest 3.x version
'vue-demi': 'https://cdn.jsdelivr.net/npm/vue-demi@0/lib/v3/index.mjs',
// Latest 5.x version
'typescript': 'https://cdn.jsdelivr.net/npm/typescript@5/lib/typescript.min.js',
}
: {
pinia: '/src/pinia-dev-proxy',
vue: '/src/vue-dev-proxy',
'vue/server-renderer': '/src/vue-server-renderer-dev-proxy',
// Latest 5.x version
'typescript': 'https://cdn.jsdelivr.net/npm/typescript@5/lib/typescript.min.js',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't need typescript, the vue js playground doesn't have it

}),
}
})),
vueVersion,
sfcOptions: computed(() => sfcOptions),
},
// initialize repl with previously serialized state
hash,
)

const previewOptions: ReplProps['previewOptions'] = {
customCode: {
importCode: `import { createPinia } from 'pinia'`,
Expand Down Expand Up @@ -62,25 +94,6 @@ provide(PiniaVersionKey, piniaVersion)
// FIXME: use a CDN that can fix the sub deps: https://play.pinia.vuejs.org/#eNp9VMFy2jAQ/RWNL8AEJJikOTCQuu3kkB7aTtOjL8ZeQMReaaQ1YYbxv3ctg0MI5GR79+3bt09a76Nv1sptBdE0mvnMaUvCA1VWFCmu5klEPokeEtSlNY7EXlQensk4ELVYOlOKnlSZqZDASfK9BBPMDHomCaB5h+8PEpyptgPz8QdBaYuUgL+EmC0qIoMizgqdvXDfUC/x5obbP2HmoATk/vuWWKKo65lqi5hgpjq2aBi1YkdlauXGG+TR9k2P5JDgiaYiRJqY1ajTJpJEKrxL8OVo4cyr55k2DB4eoTH7pHLYkjGFH6VWt2VrIuunSnGd9Gv1ARXfyy9yogq9aCBKYw67j8RsFDvp4CrnERBPxsw3/pqD9XOOj3IodTyWkzt5f8J5zFzkOyvruOJbeSvv3rNcI7iEVezZFtzIAQ/pwF036Ax4JGu46gRrPkXyfJOWenV2hpkprS7A/bak+aa9O8u0KMzrzxAjV0GnLFtD9nIhvvG7VuEfB0HQyTSUuhVQm358/gU7fu+Spcmr4uDMleRf8KaoGo0t7HuFOcs+wQW1T+FKalz98487AvTHoRqhwY2AD+7++GT0N7ns5ImLb8vJFnZbnMNS49kih8vPG9yBHCy7JHcPyw27kGx3vPsXzE8J+72wor1hK84Tb+VU9Adi/iD6B704FeMwVz3gRz2I6v/N038l

if (!hash) {
store.setImportMap({
imports: {
...store.getImportMap().imports,
...(import.meta.env.PROD
? {
pinia: '/pinia.esm-browser.js',
'@vue/devtools-api':
'https://cdn.jsdelivr.net/npm/@vue/[email protected]/lib/esm/index.js',
'vue-demi':
'https://cdn.jsdelivr.net/npm/[email protected]/lib/v3/index.mjs',
}
: {
pinia: '/src/pinia-dev-proxy',
vue: '/src/vue-dev-proxy',
'vue/server-renderer': '/src/vue-server-renderer-dev-proxy',
}),
},
})
Comment on lines -65 to -82
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't totally understand what this block was doing, and removing didn't seem to impact the playground...?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's not needed anymore since it's done in the initialization


store.setFiles({
// gets the tsconfig and import map
...store.getFiles(),
Expand All @@ -90,12 +103,10 @@ if (!hash) {
}

// persist state
watchEffect(() => {
const newHash = store
.serialize()
.replace(/^#/, useDevMode.value ? `#__DEV__` : `#`)
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed this replace logic; things still appear to be functional but please double-check

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it's now the __PROD__ that needs to be removed, maybe it's done by the serialize function now. For this kind of things I would look at the vuejs/core playground itself

history.replaceState({}, '', newHash)
})
watchEffect(() => history.replaceState({}, '', store.serialize()))

// production mode is enabled
productionMode.value = import.meta.env.PROD
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We probably need to remove this. It's better to use the dev version by default (like in the vuejs playground)


function toggleDevMode() {
const dev = (useDevMode.value = !useDevMode.value)
Expand Down
4 changes: 2 additions & 2 deletions packages/online-playground/src/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const piniaVersion = inject(PiniaVersionKey)!

async function setVueVersion(v: string) {
vueVersion.value = `loading...`
await store.setVueVersion(v)
store.vueVersion = v
vueVersion.value = `v${v}`
}

Expand Down Expand Up @@ -59,7 +59,7 @@ function toggleDark() {
</a>
</h1>
<div class="links">
<VersionSelect v-model="store.state.typescriptVersion" pkg="typescript">
<VersionSelect v-model="store.typescriptVersion" pkg="typescript">
<template #label>
<img src="/logo-ts.svg" alt="TypeScript" class="version-logo" />
</template>
Expand Down
2 changes: 1 addition & 1 deletion packages/online-playground/src/defaults.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { InjectionKey, Ref } from 'vue'

export const AppVue = `
<script setup lang="ts">
import { useStore } from './counter.ts'
import { useStore } from './counter'

const store = useStore()
</script>
Expand Down
Loading