Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Aug 04 20:36

    brianmhunt on master

    jsx) Add support for passing ge… jsx) Add some tests for JSX + w… (compare)

  • Jul 19 16:15
    brianmhunt commented #92
  • Jul 15 14:17
    caseyWebb commented #74
  • Jul 14 00:41
    cosmoKenney commented #74
  • Jul 14 00:37
    cosmoKenney commented #74
  • Jul 13 05:40
    skewty commented #92
  • Jul 13 05:11
    skewty commented #74
  • Jul 11 15:23
    brianmhunt commented #98
  • Jul 11 15:19
    avickers commented #98
  • Jul 11 12:55
    brianmhunt commented #98
  • Jul 11 12:50
    brianmhunt commented #21
  • Jul 05 22:22
    avickers commented #66
  • Jul 02 13:16
    brianmhunt commented #99
  • Jul 02 13:11

    brianmhunt on master

    Update CHANGELOG.md (compare)

  • Jul 02 13:11

    brianmhunt on master

    Update CHANGELOG.md (compare)

  • Jul 02 13:08
    brianmhunt commented #71
  • Jul 01 19:27

    brianmhunt on v4.0.0-4.0.0-alpha10.0

    (compare)

  • Jul 01 19:26

    brianmhunt on v4.0.0-alpha9

    (compare)

  • Jul 01 19:26

    brianmhunt on v4.0.0-alpha10.0

    (compare)

  • Jul 01 19:25

    brianmhunt on v4.0.0-alpha8.0

    (compare)

Brian M Hunt
@brianmhunt
yeah, I've noticed that, too.
Ok, I'm calling it a night. Thanks for the help @caseyWebb ; I'm sure I'll have time to tinker with it tomorrow too.
Appreciate all your help. BTW, how is tko.utils looking?
Casey Webb
@caseyWebb
Everything looks pretty solid, just sifting through all of it. Would you be open to swapping out standard for prettier as far as formatting goes? I rely so heavily on format on save it's embarassing haha. tslint fixing works ok, but prettier just rewrites the entire file. It's always the same, all the time. Completely takes the thinking out of it, and keeps things extremely legible
I use it + tslint in my projects and the combo works out great
Brian M Hunt
@brianmhunt
lol, yes I was going to suggest prettier. StandardJS has lots of annoying limitations that make it a nuisance over time. If it's all the same to set up, I'd prefer eslint to tslint since the TS team is apparently focusing on eslint Microsoft/TypeScript#29288 — but it's a very weak preference; if eslint is a nuisance to set up, tslint is just fine.
Michael P. Jung
@bikeshedder
@caseyWebb @brianmhunt I was thinking about a syntax even shorter. e.g. <div onclick=myHandler>. The rule is simple: property values are acutal JavaScript code. Thus class="foo" sets the class to the string foo while class=foo would set the class to the value of the variable foo. I you want to call a function just write something like <div style={backgroundColor: hsv(240, 50, 50)}>. Custom bindings could work just the same via <div myBinding=[thisIs, aReal, jsArray]>.
I think markojs just nailed it by going this route: https://markojs.com/docs/syntax/#attributes
I'm doing a lot of JSX/TSX lately (using React with TypeScript) and writing all those curly braces just feels redundant.
Casey Webb
@caseyWebb
I thought that was what I was doing :sweat_smile:
I don't actually know JSX
just stabbing in the dark at the syntax. I just want type-safety.
Michael P. Jung
@bikeshedder
Yeah. <div ko-bind={click(myHandler)}> is requires a custom parser as does <div click=myHandler>. The latter just expresses the same thing with less characters.
tbh. I never understood why JSX introduced those weird curly braces for everything. Why not assume the attribute value is an JS expression and be done.
Brian M Hunt
@brianmhunt
@bikeshedder I designed TKO to be parser-agnostic in the sense that one could use JSX or markojs, provided that the parser outputs an expected object-format/syntax tree { elementName: string, attributes: object, children: [] }. With a proper parser, there's no reason markojs style couldn't be used.
Brian M Hunt
@brianmhunt
Hi all. Just an update that I've published 4.0.0-alpha8. The main reason is that this fixes the bug that @piever reported. It also includes a tko.createElement that's a polyfill for React.createElement when using a JSX compiler that requires a function (such as Babel). Since I last did an update lerna has changed a bit, so I'm aware of some unnecessary files included in the version, and please let me know if you experience any issues. Cheers.
Pietro Vertechi
@piever
thanks for the quick fix and release!
Brian M Hunt
@brianmhunt
Pleasure!
Pietro Vertechi
@piever
sorry to bug you again: is there a cdn where I can get the minified javascript for the latest release? I tried https://unpkg.com/tko@4.0.0-alpha5h/dist/tko.min.js but I don't think it is up to date
(The tko package has been deprecated since we moved to a monorepo, but I haven't yet figured out how to mark it as such)
Pietro Vertechi
@piever
perfect thank you!
Then I'd recommend to update the TKO README (it's where I got the link)
Pietro Vertechi
@piever
is the link above stable (I'll need it to set up the JavaScript locally at build time of the Julia package)?
Brian M Hunt
@brianmhunt
@piever Good tip re. TKO link, thanks. The link ought to be stable.
Pietro Vertechi
@piever
I have one more thing that's causing trouble with the update, though it's not easy for me to create a MWE in javascript + html. I have the impression that something changed in terms of "nested bindings implementation" (in that with the generated html and javascript and Knockout 3.4 things used to just work, but they do not work any longer with tko). Were there any changes from knockout 3 to tko? Would there be any way to work with multiple viewmodels in the same page in tko specifying that a given node (to which I am applying bindings) should not take bindings from a parent node?
Pietro Vertechi
@piever
I would actually suggest that applying bindings to a node (i.e. ko.applyBindings(model, node)) should automatically ensure that bindings from parent nodes are not applied (it seems strictly more useful than erroring), though I definitely don't have a lot of experience in web development so I could be overlooking some clear drawbacks
Brian M Hunt
@brianmhunt
@piever Multiple / nested binding ought to work in tko. It passes all the KO 3.4 tests, so anything that doesn't work would be something outside the scope of testing, so it'd be great to have a MWE so we could narrow down, test, and fix the issue. In terms of ko.applyBindings it will error if bindings are already applied. If you have an example of how you're organizing your bindings, I can give you some insight into how you might want to approach it.
Pietro Vertechi
@piever
actually, this time it was not a bug but me not understanding how to do things :) The documentation for knockout 3.4 (https://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html) still applies and I can just use controlsDescendantBindings to make sure that a parent binding doesn't interfere with an "inner bindings". The organization of the bindings is itself a bit unusual, as every widget generate from Julia (i.e. slider, textbox, ect...) has its own knockout model applied to it, so they easily get nested (for example a textbox could be inside an accordion menu), in which case it turns out I need to use controlsDescendantBindings.
Pietro Vertechi
@piever
I have a basic question (again, I may be missing something basic due to lack of javascript / frontend experience): I'm using knockout components and wanted to understand what is the most lightweight approach to move the "HTML part of a component" (the template) to an external file, possibly without adding many more javascript dependencies (and definitely without using node as I like to publish stuff on github pages). The use case are components where the HTML part is not so small so it's a bit clumsy to have it live inside the js file as a string. What would be the simplest option? I've seen there is this closed issue knockout/tko#64 but could not understand why it was closed
(I'd be fine with dropping older browser compatibility, if that helps in reducing the amount of js dependencies)
Brian M Hunt
@brianmhunt
@piever What you probably want is a <template id='my-component-tempalte'></template> in a separate HTML file and then use ko.components.register('my-component', { template: { element: 'my-component-template' }, viewModel: ... });
Pietro Vertechi
@piever
Thanks! That makes a lot of sense. From what I understand I would basically "include" this components html file in all HTML files that need it. Is there a clean way to include these HTML file (say components.html) into the regular html file that correspond to the various pages of the website?
Brian M Hunt
@brianmhunt
@piever There's a whole slew of ways to include an external HTML file, with the best solution often depending on what you're using for your build system. Webpack is common do-it-all e.g. https://stackoverflow.com/questions/36216404, but there's also lots of other HTML-specific static file builders like Hugo and Jekyll. You can also dynamically load the HTML and inject it into the page, but this can represent some security concerns; for more info on that method have a look at https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page
Pietro Vertechi
@piever
Ah, I see, thanks for the detailed answer!
jclementEIT
@jclementEIT

Hi @brianmhunt! I'm attempting to implement TKO in place of a Knockout 3.4 project. I'm using 4.0.0-alpha3 although I've tried other versions. Everything runs great in Chrome and Firefox, but IE consistently throws an error:

Expected ':'
ko.js (1833,8)

'ko' is undefined
index.html (36,1)

It seems that whatever IE is bonking on in ko.js is failing to define the ko object and the page code fails. I tried a simple test on my desktop using the same file with IE and a very simple ko initialization on my page and it's reporting the same error. This is happening in all versions of IE for me, including Edge.

Do you have any suggestions as to what's happening and how to address it?

Andrew Vickers
@avickers
Usually, that’s caused by shorthand object initialization:
let o = {a,b,c}

instead of

let o = {a:a,b:b,c:c}

IE is the only environment that doesn’t support shorthand.

But that shouldn’t be an issue in Edge, so idk
jclementEIT
@jclementEIT

IE keeps pointing at this piece of code in subscribable.js

var ko_subscribable_fn = {
  init (instance) {
    instance._subscriptions = {}
    instance._versionNumber = 1
  },

Specifically the init (instance) line.

That's in alpha3. If I use alpha5h, it complains about a Symbol definition.
Andrew Vickers
@avickers
OK, that makes sense. That’s a different kind of ES2015 shorthand, but it should work in Edge.
As for Symbols, I don’t believe there is a polyfill for them, so they are incompatible with IE
jclementEIT
@jclementEIT
Nuts. I've been using tko as a substitute for Knockout 3.4 because we're having issues with the content security policy not jivving with 3.4. Aside from somehow relaxing the CSP on the page I'm using Knockout, I'm not sure how to resolve the IE incompatibility.
Andrew Vickers
@avickers
Maybe something like https://github.com/medikoo/es6-symbol
Symbols are a new primitive, so there’s no way to get 100% coverage; however, that polyfill might be enough to allow TKO to function in IE.
Andrew Vickers
@avickers
Just be aware that if either TKO or your code rely on typeof, for instance, it will be a problem because it will be string instead of symbol.
jclementEIT
@jclementEIT
Thanks for the suggestion, @avickers. I'll try that.
Ken Hadden
@cosmoKenney
does tko incorporate knockout mapping and knockout validation?
Andrew Vickers
@avickers
@cosmoKenney Hi Kenney - I don’t believe so. I was able to pretty easily create a mapping tool by using a Proxy object with a get trap that returned properties wrapped in an Observable, and then used object destructuring to pull out what I needed.
If that doesn’t make sense, I can go look for the code :)
Ken Hadden
@cosmoKenney
Thanks @avickers.