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

Jump to bottom

fix: svelte types generation during build #14

Merged
merged 5 commits into from
May 9, 2024
Merged

fix: svelte types generation during build #14

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
13dcd34
fix: svelte types generation during build
paoloricciuti May 9, 2024
bef6d73
refactor: import extension
mattcroat May 9, 2024
e08a632
fix: ship required ts files for svelte renderer
paoloricciuti May 9, 2024
f66b3a9
feat: update
antfu May 9, 2024
92714a8
chore: update
antfu May 9, 2024
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
1 change: 1 addition & 0 deletions build.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export default defineBuildConfig({
await fs.writeFile('dist/svelte.mjs', 'export * from "./svelte/index.mjs"\n', 'utf-8')
await fs.writeFile('dist/svelte.d.ts', 'export * from "./svelte/index.mjs"\n', 'utf-8')
await fs.writeFile('dist/svelte.d.mts', 'export * from "./svelte/index.mjs"\n', 'utf-8')
await fs.copyFile('dist/svelte/index.d.ts', 'dist/svelte/index.d.mts')
},
},
})
4 changes: 2 additions & 2 deletions src/svelte/ShikiMagicMove.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<script lang="ts">
import { codeToKeyedTokens, createMagicMoveMachine } from '../core'
import { codeToKeyedTokens, createMagicMoveMachine } from '../core.mjs'
Copy link
Member

Choose a reason for hiding this comment

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

This will break dev (the playground)

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure how to fix it

Copy link
Contributor Author

Choose a reason for hiding this comment

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

shipping core.ts, renderer.ts and types.ts will fix it. Because svelte files are compiled with the svelte version of the user of the library through vite. Do you think it will be feasible and possible through unbuild?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

for the moment i've added some other fs.copyFile, i don't know if there's a better way but this should make everything works both in the playground and in imported svelte projects.

Do you have a quick way to test this in react and vue too?

Copy link
Member

Choose a reason for hiding this comment

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

I don't think shipping source files is a good idea. I feel it would be better if we could somehow compile the svelte file to pure JS, or rewrite the path on build

Copy link
Contributor

Choose a reason for hiding this comment

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

if we could replace the extension at build time it would be great

Copy link

Choose a reason for hiding this comment

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

Coming in from left field to suggest either:

  • all build files are outputted as .js (you have type module set so shouldn't break anything). That way in TS files you can import with .js extensions which will work during both dev and builds (being explicit is usually better anyway)
  • dev uses a built version of the library rather than the TS source

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't think shipping source files is a good idea. I feel it would be better if we could somehow compile the svelte file to pure JS, or rewrite the path on build

Compile svelte files to js is not the right approach because that would mean the compilation is stuck at the build moment. This basically means that if the user uses a different svelte version it might be uncompatible.

We can rewrite path on build although i see this solution as a bit more brittle than actually shipping the typescript files to allow them to be compiled at build time by the user.

The suggestion from @ghostdevv is also a good compromise imho.

import ShikiMagicMoveRenderer from './ShikiMagicMoveRenderer.svelte'
import type { HighlighterCore } from 'shiki/core'
import type { MagicMoveRenderOptions, MagicMoveDifferOptions } from '../types'
import type { MagicMoveRenderOptions, MagicMoveDifferOptions } from '../types.d.ts'

interface ShikiMagicMoveProps {
highlighter: HighlighterCore
Expand Down
4 changes: 2 additions & 2 deletions src/svelte/ShikiMagicMovePrecompiled.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { syncTokenKeys, toKeyedTokens } from '../core'
import { syncTokenKeys, toKeyedTokens } from '../core.mjs'
import ShikiMagicMoveRenderer from './ShikiMagicMoveRenderer.svelte'
import type { KeyedTokensInfo, MagicMoveDifferOptions, MagicMoveRenderOptions } from '../types'
import type { KeyedTokensInfo, MagicMoveDifferOptions, MagicMoveRenderOptions } from '../types.d.ts'

interface ShikiMagicMovePrecompileProps {
steps: KeyedTokensInfo[]
Expand Down
4 changes: 2 additions & 2 deletions src/svelte/ShikiMagicMoveRenderer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { MagicMoveRenderer } from '../renderer'
import type { MagicMoveRenderOptions, KeyedTokensInfo } from '../types'
import { MagicMoveRenderer } from '../renderer.mjs'
import type { MagicMoveRenderOptions, KeyedTokensInfo } from '../types.d.ts'

interface ShikiMagicMoveRendererProps {
class?: string
Expand Down
Loading