Comments (6)
Is a special construct really needed for this? It looks like we could use the component recursively as long as the compiler added a self-reference in its components
property, somewhat akin to this:
const MyComponent = { components: {} };
MyComponent.components.MyComponent = realMyComponent;
export default MyComponent;
{{if recurse}}
<MyComponent/>
{{/if}}
I think something along these lines should work, and it'd be closer to native Custom Elements behavior.
from svelte.
Does it mean that something like this:
<div
on:click='set({accordionOpen: !accordionOpen})' class="accordion-container">
<div class="accordion-header">
{{headerComp}}
</div>
{{#if accordionOpen}}
<div class="accordion-content">
{{contentComp}}
</div>
{{/if}}
</div>
making it work like this:
<div>
<Accordion headerComp=HeaderComp contentComp=ContentComp />
</div>
HeaderComp
and ContentComp
are any other regular imported components with their own data() functions initialized already.
from svelte.
So, something like a tree-view would become possible by using two components, one for the tree node and one for the tree itself, similar to this example in Vue.
For something like a tree-view, being able to put both the node and root views/components in the same file makes a lot of sense though - in fact, keeping the node component itself as a private component of the tree-view itself would make a lot of sense.
What I would like is for the export default
declaration to be used to export the tree-view component itself, while declaring the tree-node component separately, would that work? We would need some way to designate HTML and CSS sections as belonging to a specific named component, maybe with an attribute like svelte:component
or a <template>
tag to group the HTML and CSS tags together?
from svelte.
Thanks for the feedback everyone — finally got round to tackling this, have opened #332.
@mrkishi Unfortunately that wouldn't work as you can't export a reference, you have to export an object literal. That's so that Svelte can do static analysis on your component at compile time.
@mindplay-dk The root and the nodes would have to be two separate components, but that's ok since the node would only depend on itself
from svelte.
Released in 1.10.0. You can see it in action on Svelte Hacker News, by clicking on a comment thread (comments embed their children recursively)
from svelte.
Feels incredibly fast! Excited to test this out :-)
from svelte.
Related Issues (20)
- Svelte 5: using `bind:this` in `$derived` HOT 5
- Add .effect() Method for State Changes in Svelte 5 HOT 2
- Dynamic loading of cdn-hosted Svelte 5 component HOT 8
- Svelte 5: If the reference of restProps changes, all the bindable props will revert back to their default value.
- Svelte 5 TS: `class` property in template literal causes Unterminated template / Unexpected token! HOT 3
- Svelte 5: $derived from context state causes extra renders in List/Item scenario (performance bug) HOT 2
- Custom action event typings don't get picked up properly
- Svelte 5: How to debug effect_update_depth_exceeded in a Svelte 4 library? HOT 5
- Svelte 5: `style:property="value"` doesn’t apply reliably HOT 5
- Unicode alphanumeric characters HOT 1
- Using `Component` for typing doesn't allow for any other props outside the required. HOT 5
- value change should not trigger when typeing ( compositionstart -> compositionend ) HOT 11
- Svelte 5: Add the ability to bind to snippet parameters HOT 2
- Svelte 5: Nested CSS does not work with the `:has` pseudo-selector.
- Svelte 5: Add ability to manually specify dependencies for `$effect` rune HOT 1
- Nested if blocks fail validation without a separating space
- When passing an imported $state as Object.values() to an external component reactivity does not work HOT 13
- Svelte 5: Event handlers are not working if there’s `stopPropagation` between `<body>` and target element HOT 2
- Svelte 5: generated `strict_equals` causes cross-origin iframe SecurityError due to `get_proxied_value` attempting to read a property on a secure context HOT 3
- Deprecate `<svelte:self>`? HOT 2
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 svelte.