Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 31 2019 23:03

    DylanPiercey on master

    Improve optimization for nested… (compare)

  • Jan 31 2019 23:03
    DylanPiercey closed #1249
  • Jan 31 2019 23:02

    DylanPiercey on master

    Fix 'marko is using deprecated … (compare)

  • Jan 31 2019 23:02
    DylanPiercey closed #1250
  • Jan 31 2019 22:48
    coveralls commented #1250
  • Jan 31 2019 22:48
    coveralls commented #1250
  • Jan 31 2019 22:48
    coveralls commented #1250
  • Jan 31 2019 22:42
    codecov[bot] commented #1250
  • Jan 31 2019 22:42
    codecov[bot] commented #1250
  • Jan 31 2019 22:41
    codecov[bot] commented #1250
  • Jan 31 2019 22:41
    codecov[bot] commented #1250
  • Jan 31 2019 22:41
    codecov[bot] commented #1250
  • Jan 31 2019 22:40
    codecov[bot] commented #1250
  • Jan 31 2019 22:34
  • Jan 31 2019 22:33
    DylanPiercey opened #1250
  • Jan 31 2019 22:32

    DylanPiercey on fix-marko-deprecated-warning

    Fix 'marko is using deprecated … (compare)

  • Jan 31 2019 19:08
    codecov[bot] commented #1249
  • Jan 31 2019 19:07
    codecov[bot] commented #1249
  • Jan 31 2019 19:07
    codecov[bot] commented #1249
  • Jan 31 2019 19:06
    codecov[bot] commented #1249
Charles Read
@charlesread
Hi, all, how can I get Marko to actually ignore, or perhaps better said, print exactly, a custom tag? For example, <button-bank-admin v-bind:user="{}"></button-bank-admin> is still producing a Error: Invalid JavaScript identifier: v-bind:user error, despite having "<button-bank-admin>": {} in my html-elements.json.
When I don't pass the custom attribute (v-bind:user) everything is fine, so it's picking up on my entry in html-elements.json, but still actually doing something with it, which is not desired [and producing the issue].
André Santos
@andresilvasantos
I don't know if this is the right place, but I would like to share a task manager me and my girlfriend did with Marko.
I love to work with Marko, just missing scoped css for it to be perfect, ahah.
Taylor Hunt
@tigt
I've been working on scoped CSS for our project
might release it if it works
interesting back and forth between Vue and Svelte about the inflection point where a Svelte app becomes bigger than using a framework
it also links to this really interesting thing Svelte just did with using bitmasks to track changes: sveltejs/svelte#3945
@charlesread: unfortunately, Marko has a bug where it kind of just refuses to work with attribute names with : in them — it doesn't work with XML namespaces either for that reason
Taylor Hunt
@tigt
@Uptown76: The chunk flushing might be determined by Node's http stream itself — I do know Marko intentionally flushes the stream whenever it hits an <await>, but other than that I'm not sure
Burak Cankurtaran
@Uptown76
@tigt Yes of course, even though I mentioned I turned off compression,I imagined the flush() method of the compressor was being called after the lasso-head taglib . One of those dah moments. I need to read the code await/renderer.js
gregoireberclaz
@gregoireberclaz

Hello everybody,

Is it possible in marko file to get the html result of input.renderBody in a Promise ? Here is an example in "pseudo code" that will help you to understand what I want :

$ { 
    let fn_getHtmlBody = new Promise((resolve, reject) => {
        input.renderBody(input, out);

        out.on("finish", () => {
            let html = out.getOutput();
            resolve(html);
        });
    });
}

Thank you for your help

Dylan Piercey
@DylanPiercey

@gregoireberclaz

$ { 
    let fn_getHtmlBody = new Promise((resolve, reject) => {
        var nestedOut = out.createOut();

        nestedOut
            .on("error", reject)
            .on("finish", result => {
                resolve(result.getOutput());
            });

        input.renderBody(nestedOut);

        nestedOut.end();
    });
}

The above should work, however it is only going to work on the server side. Typically it is recommended to treat renderBody as a black box, since it can render anything including components and actually creates a vdom in the browser.

Taylor Hunt
@tigt
and its output/behavior is almost guaranteed to change with new Marko versions
Alexander Tsepkov
@atsepkov
hi, I tried using marko-express starter template for an app (https://github.com/marko-js-samples/marko-express - the repo seems dated so let me know if I shouldn't be using it), updated lasso and marko versions and made some fixes to html to get rid of warnings, but even with the latest @lasso/marko-taglib (don't quite understand if I need the taglib yet, but the template uses it) I'm getting package-path deprecation warning triggered by internal marko-taglib package code. Is the lib deprecated? Should I be using an alternative approach to spawn a new express project? I saw the guide (https://markojs.com/docs/express/) but it doesn't seem to make use of lasso bundler
Taylor Hunt
@tigt
@atsepkov I believe the recommendation for new projects is to use Webpack instead of lasso
Alexander Tsepkov
@atsepkov
@tigt so is lasso deprecated?
Taylor Hunt
@tigt
@atsepkov I don't know about officially deprecated, but I would personally avoid it
Alexander Tsepkov
@atsepkov
also, I apologize if this is a silly question, but couldn't figure this out from the docs, I'm facing a couple more issues:
  1. when I try to access document from within js in the component, I see an error on the page that it's not defined. Is the logic defining the component executed server-side? anyway to add client-side js to component?
  2. I'm playing with a library that generates html as a string, previously I just assigned it to element.innerHTML, in marko I can't figure out how to render it as html instead of string, ${html} just dumps html as text (which makes sense), but I don't know an alternative and having trouble with client-side js
Alexander Tsepkov
@atsepkov
so I just figured out that I can do it by adding a <script> tag to the component, but that dumps the logic to global scope on the page? is there a better approach?
Aerlin
@Aerlin
I believe a component first gets created/rendered on the server, sent to the client as html along with js to rehydrate and when needed rerender the component.
As for the html, do $!{html} to prevent marko from escaping the text.
Check if window object exists to determine if the code is running client side or not
Aerlin
@Aerlin
Also try moving your code that accesses document to the component's onMount function, that only fires on the client
Aerlin
@Aerlin
@atsepkov https://github.com/marko-js/examples/tree/master/examples looks to have more updated examples than the one you linked.
Alexander Tsepkov
@atsepkov
I see, thanks. So if I understand correctly, something like onCreate would only be called server-side? And thanks for the repo. Also, any libs I import in the module are available both client and server-side?
Aerlin
@Aerlin
ya onCreate is only fired on the server. Most modules imported in the component will be available on both sides. On the odd time it doesn't, it'll warn in console that it wasn't able to package it for the client
Alexander Tsepkov
@atsepkov
btw, are there syntax files available for vim by any chance? (syntax highlighting and indention, I found the language server but it only provides error checking)
Alexander Tsepkov
@atsepkov
can I access element's own methods from within ${}? So far I've only been able to access this.state and this.input
For example, if I want a method to run some logic on an input first before using it inside the element
Aerlin
@Aerlin
You could try adding on-change('funcName') to the element. <input ... on-change('funcName')>
Then in the component.js, funcName: function funcName(event, element) {const value = event.target.value; ect...}
Dylan Piercey
@DylanPiercey

@atsepkov You also have access to the component instance from within the template as component.

For example:

<if(component.someMethod("…"))>
  ...
Dylan Piercey
@DylanPiercey

@atsepkov also on the server side a subset of the methods are called, onCreate, onInputand onRender. In the browser the all of the lifecycle methods are used to rehydrate the state from the server side, onCreate, onInput, onRender, onMount, onUpdate and onDestroy.

A special case is when there is a top level component without a component.js or inline class. In that case it will not be sent to the browser at all and is only server rendered.

Alexander Tsepkov
@atsepkov
so do methods like onCreate get called twice then? Once on the server and then again post rehydration?
Dylan Piercey
@DylanPiercey
@atsepkov that is correct
Alexander Tsepkov
@atsepkov
is it possible to access id property that the component was created with by parent component from within the child component marko file?
Alexander Tsepkov
@atsepkov
nvm, dumb question, that's just input.id
Alexander Tsepkov
@atsepkov
I sandboxed some content in an iframe (mainly to limit style application to it instead of entire document), and now I see flickering when rerendering (I'm guessing because of how I'm rendering to it, marko can no longer make use of shadow dom), is there a way to fix it?
here is the code:
<iframe srcdoc=`
    <style>
        ${input.stylesheet}
    </style>
    <div.content>
        ${input.content}
    </div>
`/>
Alexander Tsepkov
@atsepkov
k, replaced that format with scoped attribute on css, still curious if using an iframe is feasible for the future without the flicker
Alexander Tsepkov
@atsepkov
btw, I must say, great job guys, this is the first time I can say that a framework makes my code simpler than vanilla html+js+css instead of more complex
Taylor Hunt
@tigt
I'm not sure you could avoid the flicker even if using vanilla JS
you would probably have to get a ref to the iframe's contentDocument and then mess with it from there, instead of having the browser reparse the entire srcdoc string
@atsepkov
Dylan Piercey
@DylanPiercey

Hey @/all !

We’ve been frankly quite bad at communicating about our roadmap and changes with the community. One of our goals for this year is to improve this situation and also gather more feedback from you all.

One of the ideas we’ve been floating around is doing a live stream where anyone is welcome to join. Is this something any one here would be interested in? We were thinking next Monday, or next Friday. Time to be determined, but likely around 12pm PST. We could chat as a community about what’s comming in Marko 5/6 and about what you’d all love to see in the framework.

If this interests you please send us a :thumbsup:!

Taylor Hunt
@tigt
would these streams be recorded so others can play them back later?
Michael Rawlings
@mlrawlings
Yup! We'd set up a Zoom meeting that livestreams to the Marko YouTube channel, share the meeting invite here as well as the livestream in case anyone wants to just listen in, and the recordings would also be available after the fact on the YouTube channel.
Taylor Hunt
@tigt
I'd certainly be interested, but video chat would be difficult for me to participate in at work
I'd have to watch the recordings