Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@aller/svelte-components
Advanced tools
This repository contains svelte components that can be used in other projects. You should consider creating a svelte components if you need a component that requires a lot of clientside logic. If you want to create a component that can be ESI'd in without
This repository contains svelte components that can be used in other projects. You should consider creating a svelte components if you need a component that requires a lot of clientside logic. If you want to create a component that can be ESI'd in without a lot of clientside logic, take a look at the esi-components project in wolverine-frontend
yarn
yarn dev
localhost:3000/render/example
This project serves content both through a NPM package and an express server. For your changes to be available everywhere, follow these steps
svelte-components-yourComponentName
. You can do this through the admin panel in janitr (https://github.com/dbmedialab/janitr)yarn build
locally, and run npm publish --access public
to publish your changes to NPM. (Make sure you are logged in with npm login
and that your NPM user is a part of the Aller org)@aller/svelte-components
version in the repositories that uses it.The simplest way of using these components is to ESI them in. <esi:include src="/app/svelte-components/render/example"></esi:include>
. This will return server side rendered markup with script tags that fetches the clientside bundle. Add the query parameter ssrModernClientBundle
if you want the modern client bundle's code to be inserted on the server instead of downloading it clientside.
Some projects, like wolverine-frontend-xavier, can not use ESIs. In those cases, we can add the @aller/svelte-components
package which exposes an async function that server side renders the svelte components.
Here is an example of how this is used server side with express
import renderComponent from '@aller/svelte-components'
const componentMarkup = await renderComponent({ name: 'example', ssrModernClientBundle: true })
res.send(componentMarkup)
parameter | type | description |
---|---|---|
name | String | Name of the component you want to render |
ssrModernClientBundle | Boolean | Will insert the modern client bundle's code on the server instead of downloading it clientside. For modern browsers the component will be interactive almost immediately, but legacy browsers will now downlaod both the modern and legacy bundles. Consider the size of the client bundle before using this. Only works in node, will not work in Next.JS. |
props | Object | Props sent to the Svelte component |
bundlePath | String | Path to the bundle, do not change when importing from package |
There is a specific structure and naming convention that needs to be follow for this to work properly right now. This can hopefully be refactored at some point to make it a bit easier. If you just want a starting point, copy /src/example
.
Each svelte components needs to be placed within it's own folder in /src
. The component's folder should only contain a .svelte and .js file with the same name as the component folder. The .js file's target also needs to inlude the name of the component target: document.getElementById("svelte-app-NAME_OF_COMPONENT")
. All other files should be within subfolders, and there is no specific structure that is required here. For example:
src
|
└───myNewComponent
│ │ myNewComponent.js (with target id 'svelte-app-myNewComponent')
│ │ myNewComponent.svelte
│ │
│ └───components
│ │ Button.svelte
│ │ List.svelte
│ │ ...
│ └───store
│ │ store.js
│ │ ...
So far this works by making webpack create three different bundles. One for the server, one for modern browsers and one for legacy browsers.
The server bundle is used to server side render the svelte component. The bundle is created by targeting the main .svelte file directly (src/yourComponent/yourComponent.svelte)
The modern and legacy bundle are used clientside. These bundles are created by targeting each components main .js file (src/yourComponent/yourComponent.js). The legacy bundle is transpiled and polyfilled to support IE11
The server will respond with styled markup and a script tag that will download the bundle. Once the bundle is downloaded, the component will hydrate and become interactive
We create two differende bundles for the client because we would like to avoid serving a heavily transpiled and polyfilled bundle to browser's that does not need it. We include the modern bundle with a script type="module"
tag and the legacy bundle with a script nomodule
tag. Modern browsers that support ES2015+ will download the modern bundle and ignore the legacy bundle. Legacy browsers that does not support type="module" will download and execute the legacy bundle. Some old browsers might download the modern bundle as well, but not execute it. More information about this approach
FAQs
Svelte components
We found that @aller/svelte-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.