Comments (11)
Yeah, that'd be pretty legit 👍
That'd definitely allow me to do what I want to do here! 🎉
from preact-habitat.
Hello,
I also would like to pass functions to a widget. From reading this thread I assume you already did implement the exposing of DOM events? However, I cannot find anything like registerDomEvent
Can anyone provide an example of passing functions/using events across parent and child/widget components?
from preact-habitat.
I'd totally love it if props could include functions. Could do:
<script type="text/props">
window.widgetVariable = {
props: {
videoId: '11223300',
playFromStart: true,
onPlay: function () {
console.log('played!')
}
}
}
</script>
Then we could delete widgetVariable
off of window
👍
My use case is with downshift, I'd love to be able to expose the full API and allow you to render whatever you'd like using whatever framework you want 😄 Need a full function to do that though...
from preact-habitat.
That idea is so damn awesome.
Oh! @kentcdodds would you like me to allow you expose DOM events?
so instead of writing it inside HTML we can expose DOM events and get them to consume it whenever.
so you can have a global module name, I am very busy now but can deliver this by next Friday!
your users can do: UMDModuleName.on('play', () => {...})
?
You can do:
habitat.registerDomEvent('play', .....)
did I misunderstand please let me know!
from preact-habitat.
Could also be cool to be able to pass them as properties on the container element (or the <script>
tag itself), too. Would have to come up with a namespace that could be observed for that purpose, though.
from preact-habitat.
V1.0.0 or higher now support props 🎉
from preact-habitat.
That makes sense. Thanks!
from preact-habitat.
@zouhir Similar to @Rouvo I also require this functionality. Has anything been added thus far?
from preact-habitat.
@rdmurphy I actually thought of data attributes. but found a JSON config to look more neat after looking at the following options:
<script data-props-videoId ="11223300" data-props-playFromStart="true" >
or
<script data-props="{ ...props }" >
I'm open to suggestions
Namespace idea is KOOL! I love it
from preact-habitat.
@zouhir can we make it possible to pass props from the render call?
from preact-habitat.
@luisrudge in this version, what you can do in a case where you want to render widget with extra props:
let extraPropsObj = {...};
let ExtraPropsApp = () => (<App ...extraPropsObj />)
let appHabitat = habitat(ExtraPropsApp);
appHabitat.render({ ... })
that what works now out of the box, will consider allowing passing habitat(<App ... />)
in future releases :)
hope my answer was helpful
from preact-habitat.
Related Issues (20)
- Ability to replace the container rather than mount inside HOT 1
- Update doc example HOT 1
- Widget double rendering HOT 2
- Feat: Should rerender component when called `render` again? HOT 3
- Generate file per component HOT 5
- Asynchronously added widget not showing up HOT 2
- Compatibility with Unistore HOT 2
- Broken example: ReferenceError: Welcome is not defined
- [Question] Why do you use `text/props` as MIME type for the config element? HOT 1
- Can I render widget into iframe? HOT 2
- Compatablity with Preact X HOT 5
- Compatibility of adding Preact-portal in preact-habitat HOT 2
- Add maintainers to this project HOT 4
- Props removed with clean and inline options set to true
- Define props on script tag for "inline" render? HOT 1
- [Question] - Sharing logic between widgets HOT 2
- Handling clicks and interactions - widget showing based on click HOT 5
- Support Hydration
- Cannot read properties of undefined (reading 'render') HOT 1
- dynamically imported module
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 preact-habitat.