Is it just me, or is Hyperscript hideous?

joffreyjaffeux · November 19, 2019, 7:54am

FYI I released a component few days ago which started as an example of what you can achieve with widgets and hbs:

Code is not perfect but you might learn a few things reading it.

merefield · November 19, 2019, 9:06am

@joffreyjaffeux thanks for that. I had a scan of the code and notice you extended things with ‘attach’ which is great.

Can you confirm it is not possible to use existing Helpers defined elsewhere in the app within a widget template?

joffreyjaffeux · November 19, 2019, 9:10am

Hi,

you can use some of them, and it’s actually not that hard to add more, PR on this would probably be gladly accepted.

Starting point and list of available helpers are the list of cases in this switch:

github.com

discourse/discourse/blob/main/app/assets/javascripts/discourse-widget-hbs/lib/widget-hbs-compiler.js#L87


      
            if (!id) {
              id = ++state.helperNumber;
              state.helpersUsed[name] = id;
            }
            return `__h${id}`;
          }
          
          
function mustacheValue(node, state) {
            let path = node.path.original;
          
          
  switch (path) {
              case "attach":
                let widgetName = argValue(
                  node.hash.pairs.find((p) => p.key === "widget")
                );
          
          
      const attrs = node.hash.pairs.find((p) => p.key === "attrs");
                const opts = node.hash.pairs.find((p) => p.key === "opts");
                const otherOpts = node.hash.pairs.find((p) => p.key === "otherOpts");
          
          
      return `this.attach(${widgetName}, ${attrs ? argValue(attrs) : attrs}, ${

merefield · November 19, 2019, 9:11am

Very useful! Thanks.

edL · November 19, 2019, 9:41am

Thanks for the heads up – I’ll have a good look through!

Topic		Replies	Views
A tour of how the Widget (Virtual DOM) code in Discourse works Dev	75	28504	July 10, 2023
JSX instead of h (createElement) function in widgets and other places Dev	14	1741	May 10, 2020
Developing Discourse Plugins - Part 2 - Connect to a plugin outlet Developer Guides plugin-guides , tutorial	36	28072	April 13, 2023
Help us test the new header code! Feature performance	29	10722	May 23, 2016
(not recomended) Overriding Discourse templates from a Theme or Plugin Developer Guides how-to	11	2057	July 26, 2024

Is it just me, or is Hyperscript hideous?

Related topics