Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 12:00
    drdreo edited #1574
  • 11:59
    drdreo edited #1574
  • 11:41
    drdreo opened #1574
  • Dec 03 14:12
    drdreo opened #1573
  • Nov 14 22:14
    treshugart closed #1568
  • Nov 14 22:14
    treshugart commented #1568
  • Nov 06 22:23
    Jason-Cooke commented #1572
  • Nov 06 19:40

    treshugart on master

    docs: fix typo Merge pull request #1572 from J… (compare)

  • Nov 06 19:40
    treshugart closed #1572
  • Nov 06 19:40
    treshugart commented #1572
  • Nov 06 19:25
    now[bot] commented #1572
  • Nov 06 19:25
    now[bot] commented #1572
  • Nov 06 19:24
    now[bot] commented #1572
  • Nov 06 19:24
    now[bot] commented #1572
  • Nov 06 19:24
    Jason-Cooke opened #1572
  • Oct 27 10:52
    jogibear9988 opened #1571
  • Oct 13 04:43
    kimjs3550 edited #1570
  • Oct 13 04:40
    kimjs3550 opened #1570
  • Sep 04 16:35
    treshugart commented #1569
  • Sep 04 16:34
    treshugart commented #1568
Alexandre Theodoro da Silva
@alexandrethsilva
i might be missing something of what you're saying though... i feel like i am :smile:
let's say I have a chat component that looks like this, kinda:
class ChartComponent extends Component {
  static get is() {
    return "generic-chart"
  }

  static get props() {
    return {
      color: {
        attribute: true,
      },
      dataZoom: {
        attribute: true,
      },
      legend: {
        attribute: true,
      },
      series: {
        attribute: true,
      },
      ...
    }
  }

  renderCallback() {
    const {style, className} = this.props

    return h("div", false, [
      <ReactEcharts
        option={omit(["style", "className"], this.props)}
        style={style}
        className={className}
      />,
    ])
  }
}
then the consumer component, since it has no access to this component directly as a module, only creates a definition on it's on renderCallback() that would look like this, kinda:
Alexandre Theodoro da Silva
@alexandrethsilva
class SpecialisedChartComponent extends Component {
  static get is() {
    return "specialised-chart"
  }

  connectedCallback() {
    // MAKES API CALL
    // RETURNS SOME DATA
    // UPDATES ITS STORE
  }

  renderCallback() {
    return h("div", false, [
      <generic-chart
        series={dataObjectThatCouldContainFns}
        ...
      />,
    ])
  }
}
so, in that case i can only pass things as tag attributes really
or did i miss something?
Janne Siera
@jannesiera
As far as I understand SkateJS, it goes something like this:
```static get props() {
return {
  color: {
    attribute: true,
  },
  dataZoom: {
    attribute: true,
  },
  legend: {
    attribute: true,
  },
  series: {
    attribute: true,
  },
  ...
}
} ```
Those are your properties, which you are reflecting as attributes.
Alexandre Theodoro da Silva
@alexandrethsilva
right
Janne Siera
@jannesiera
I assume that means they are available both as properties and attributes
if SkateJS is smart as I think it is, when you pass a function to one of those properties, it will attempt to directly set the property
also, you don't need to specifically reflect properties as attributes
it's just like the 'regular' onclick event you find in your regular html

element.onclick = function() { console.log('Hello world'); }

vs

element.setAttribute("onclick", "return console.log('Hello world');")

does that make sense?
Alexandre Theodoro da Silva
@alexandrethsilva
ah I see what you're trying to say...
I think I see.
but then I'd have to do that imperatively instead of declaratively at the time of the tag definition right?
so I think that's one of my issues, because I wanted to have just the definition being rendered with the chart specs directly every time
Janne Siera
@jannesiera
okay, so if you want declarative syntax it becomes about the templating language
Alexandre Theodoro da Silva
@alexandrethsilva
but your solution would work too indeed if i'd go that way
Janne Siera
@jannesiera
I don't know what SkateJS uses exactly
how's it called, hyper-something?
Alexandre Theodoro da Silva
@alexandrethsilva
yeah, i think so
Janne Siera
@jannesiera
If you take JSX for example, it translates declarative syntax into imperative syntax
React for example will always set properties
I'm assuming this one will do the same, but I don't know
Alexandre Theodoro da Silva
@alexandrethsilva
oh really? that's interesting. didn't know it
'Note that hyperscript sets properties on the DOM element object'
there you go
Alexandre Theodoro da Silva
@alexandrethsilva
nice!
man, really nice convo. thanks a lot
Janne Siera
@jannesiera
No problem, it can be a bit confusing in the beginning
Alexandre Theodoro da Silva
@alexandrethsilva
i'll have a look at it and see if i untangle myself :smile:
Janne Siera
@jannesiera
basically if i were you:
Alexandre Theodoro da Silva
@alexandrethsilva
yeah, I guess the docs leave a few things in the air for the newcomers
i should probably make a contribution once i figure it out and maybe make it a bit more comprehensive over there
Janne Siera
@jannesiera
If the components are only for your 'own' use: Don't bother reflecting attributes. Just write your components, all 'attributes' you declaratively set on your components will be set as properties. Just go on and build your stuff.
Alexandre Theodoro da Silva
@alexandrethsilva
yeah, sounds like the way to go indeed
thanks again bud
Janne Siera
@jannesiera
(y)
Trey Shugart
@treshugart

@jannesiera @alexandrethsilva

React for example will always set properties

React always sets attributes. It’s a major issue for interiop. Some links:

Skate 4.x uses Incremental DOM. Skate 5.x becomes agnostic. There’s already three official renderers sketched out:
Trey Shugart
@treshugart
Depending on what lib you use for rendering, your mileage for setting props will vary. They all have different heuristics and syntaxes. https://github.com/skatejs/val can help abstract hyperscript libs.
Alexandre Theodoro da Silva
@alexandrethsilva
@treshugart thanks a lot for this info! that's some very good insight right there
Janne Siera
@jannesiera
@treshugart thanks for correcting me on that one. I do believe angular sets properties except for when you use : syntax before the attribute name, then it will actually set the attribute. Again, not a hundred percent sure tho.
Janne Siera
@jannesiera
@trusktr thanks for the input. I'll keep that in mind. So far I haven't had any issues with that but I'm sure I'll run into them at some point.
Last weekend I recreated the React fiber Sierpinski Triangle demo that was also shown in the Stencil presentation. I'm super impressed by it's performance when using web components in combination with virtual dom! I didn't implement anything like deffered updates but with the perfromance of web components vs react I find it hard to imagine a case where I might use it.
Any plans to re-create that demo with SkateJS?