Comments (1)
This can be accomplished like so:
Example data source /content/pages/about.json
This is one example, but the data source key/value structure is flexible so do whatever works for you:
{
"components": [
{
"component": "red",
"fields": {"title": "I'm red"}
},
{
"component": "green",
"fields": {"title": "I'm green"}
},
{
"component": "blue",
"fields": {"title": "I'm blue"}
}
]
}
Example dynamic component import in /layout/content/pages.svelte
<script>
export components;
async function loadComponent(component) {
let path = "../components/" + component + ".svelte";
return await import(path).then(res => res.default);
}
</script>
{#if components}
{#each components as { component, fields } }
{#await loadComponent(component)}
{:then co}
<svelte:component this="{co}" {...fields} />
{:catch error}
{/await}
{/each}
{/if}
Example imported component /layout/components/blue.svelte
<script>
export let title;
</script>
<h1>{title}</h1>
<style>
h1 {
color: blue;
}
</style>
However, the internal gopack does not support dynamic imports so you currently have to go into public/spa/content/pages.js
after building and convert the .svelte
extension in the loadComponent()
function to be .js
manually.
Currently Gopack actually checks that static import paths exist in the filesystem, this will be challenging to implement with dynamic imports since they can use variables that we'd have to get the value of. For now the easiest thing to do would be a simple string replace of .svelte
to .js
when they match regex import();
with single or double quotes inside the brackets and a sub-pattern of .svelte
. This won't account for paths defined outside the import like in the example above and doesn't guarantee that the converted path won't throw an error. Down the road it would be nice to make this better.
It would also be nice to move the loadComponent()
function into the /layout/scripts/
folder of the starter since this is something a lot of folks might be interested in using.
from plenti.
Related Issues (20)
- Schema bleed HOT 2
- Gitea backend for CMS HOT 2
- Check port before build
- [Feature Request] Make plenti a caddy plugin HOT 2
- Unable to launch CMS on localhost HOT 7
- Hydration flicker HOT 1
- Bitbucket CMS Backend
- Can't use hyphens in filename HOT 1
- Install in Ubuntu HOT 1
- Failing build: Credentials are no longer valid for the Snap Store HOT 4
- Assets dir in Plenti site template HOT 3
- Failed build: field replacements not found in type config.Archive HOT 4
- Can SSR be enabled with V8 engine? HOT 2
- Error when using CMS editor with GitLab Pages in a monorepo HOT 5
- plenti serve is spitting errors HOT 9
- Fingerprint SPA to bust cache HOT 1
- Can't use "plenti" command HOT 2
- Broken build: invalid go version '1.21.0': must match format 1.23 HOT 1
- Component cache
- Custom env variable
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plenti.