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

feat: svelte integration #1748

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat: svelte integration #1748

wants to merge 3 commits into from

Conversation

antlio
Copy link
Contributor

@antlio antlio commented May 15, 2024

this pr is a draft proposal to support a svelte integration as requested by @baseplate-admin

@antlio antlio requested a review from hanspagel May 15, 2024 14:26
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented May 15, 2024 •
edited

⚠️ No Changeset found

Latest commit: 8adeb8b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@antlio antlio force-pushed the anthony/doc-1832-svelte-integration branch 2 times, most recently from 053c26a to 3f8c7dc Compare May 16, 2024 12:00
@github-actions GitHub Actions
Copy link
Contributor

Preview deployed to https://412bf31d-8d95-47bc-968a-16ed2c485436--scalar-deploy-preview.netlify.app

@relativeci RelativeCI
Copy link

relativeci bot commented May 16, 2024 •
edited

#1807 Bundle Size — 1.92MiB (0%).

8adeb8b(current) vs 195ca18 main#1800(baseline)

Warning

Bundle contains 4 duplicate packages – View duplicate packages

Bundle metrics  no changes
                 Current
#1807		      Baseline
#1800
No change  Initial JS 1.92MiB 1.92MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 0% 100%
No change  Chunks 1 1
No change  Assets 1 1
No change  Modules 1085 1085
No change  Duplicate Modules 0 0
No change  Duplicate Code 0% 0%
No change  Packages 157 157
No change  Duplicate Packages 4 4
Bundle size by type  no changes
                 Current
#1807		      Baseline
#1800
No change  JS 1.92MiB 1.92MiB

Bundle analysis report Branch anthony/doc-1832-svelte-integrat... Project dashboard

baseplate-admin
baseplate-admin suggested changes May 16, 2024
View reviewed changes
Copy link

@baseplate-admin baseplate-admin left a comment

Choose a reason for hiding this comment

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

Overall a solid start for an integration.

packages/svelte-api-reference/src/ApiReference.svelte Outdated
Comment on lines 41 to 45
const loadCdnScript = () => {
const cdnScript = document.createElement('script')
cdnScript.src = "https://cdn.jsdelivr.net/npm/@scalar/api-reference"
document.body.appendChild(cdnScript)
}
Copy link

Choose a reason for hiding this comment

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

Uh, pardon me but why are you loading a script from CDN? Why not use the esm provided by @scalar?

Take a look at the react implementation

scalar/packages/api-client-react/src/ApiClientReact.tsx

Line 1 in 1305f28

import { type ClientRequestConfig, useRequestStore } from '@scalar/api-client'

Copy link
Contributor Author

@antlio antlio May 16, 2024 •
edited

Choose a reason for hiding this comment

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

good call! depending on packages both approaches are taken, i took this shortcut as a starter however your are right, will update accordingly 🙏

packages/svelte-api-reference/src/ApiReference.svelte Outdated
validateSpec(spec)

contentString = await getContentString(spec)
applyDefaultCss(config)
Copy link

Choose a reason for hiding this comment

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

Should this not be in onMount() ?

packages/svelte-api-reference/src/ApiReference.svelte Outdated
const { spec, ...config } = configuration
const apiScript = document.getElementById('api-reference')

validateSpec(spec)
Copy link

Choose a reason for hiding this comment

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

Should this not be in onMount() ?

packages/svelte-api-reference/src/ApiReference.svelte Outdated

const initializeApiReference = async () => {
const { spec, ...config } = configuration
const apiScript = document.getElementById('api-reference')
Copy link

Choose a reason for hiding this comment

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

You should use svelte:bind

packages/svelte-api-reference/src/ApiReference.svelte Outdated
Comment on lines 83 to 85
<div>
<script id="api-reference" type="application/json"></script>
</div>
Copy link

Choose a reason for hiding this comment

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

Rendering it like this means we get no server side rendering (SSR)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

some work is in progress on the api reference package in order to avoid some issue here for ssr, once done i'll jump back here!

@baseplate-admin
Copy link

But there's another problem i see, your integration method is not officially supported.

Use @sveltejs/kit

@antlio
Copy link
Contributor Author

antlio commented May 16, 2024

But there's another problem i see, your integration method is not officially supported.

Use @sveltejs/kit

thanks @baseplate-admin for the solid reviews! i started to dive into a better approach method with @Svelte-kit

@baseplate-admin
Copy link

thanks @baseplate-admin for the solid reviews! i started to dive into a better approach method with https://github.com/Svelte-kit

you are welcome, feel free to ask me for anything. also do you know that svelte itself is moving from version 4 to version 5. Please make sure that this patch works with both version 4 and 5.

@antlio antlio force-pushed the anthony/doc-1832-svelte-integration branch from 3f8c7dc to bb0ab01 Compare May 30, 2024 12:27
@antlio antlio force-pushed the anthony/doc-1832-svelte-integration branch from bb0ab01 to 8adeb8b Compare May 30, 2024 12:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@baseplate-admin baseplate-admin baseplate-admin requested changes

@hanspagel hanspagel Awaiting requested review from hanspagel

@marclave marclave Awaiting requested review from marclave marclave will be requested when the pull request is marked ready for review marclave is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@antlio @baseplate-admin