by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Taylor Hunt
@tigt
can't use it at work
blocked
both by proxy policy (by domain) and also de-facto by our proxy setups not supporting WebSockets
so even if I hop off the work network to talk to you guys, my work computer still can't run Discord
Dylan Piercey
@DylanPiercey
That’s frustrating -_-
Taylor Hunt
@tigt
SURE IS
Taylor Hunt
@tigt
I'm amazed Discord throws a fit when it can't use WebSockets, every other chat client I've ever used falls back to SSE or plain old COMET
Dylan Piercey
@DylanPiercey
@tigt i’m assuming both the web client and app don’t work?
Taylor Hunt
@tigt
I can try the app
Khauri McClain
@Khauri
Hello. I am trying to convert a medium sized lasso project to webpack but I'm having trouble reproducing the browser.json functionality. Currently I have a layout component that imports a js file which in turn imports all kinds of css, polyfills, and vendor js, but they're not being loaded on the page. They are being bundled, but there's just no script/link tags associated with them. My webpack.config.js is based on the example config.
Dylan Piercey
@DylanPiercey

Hey @Khauri, the browser.json isn’t recognized by webpack and so those assets will have to be loaded in a way that webpack understands. For CSS this is pretty easy, inside the style.less (or in the style {} block of the template) you can @import "./path-to-css”. This will ensure that path is loaded in the browser.

For JS it’s a bit trickier since some of the JS is only loaded server side. Basically what you’ll want is to add something like this to your root component.js (or class {} block) component:

if (typeof window === "object") {
  require("./path-to-polyfill.js");
}

Webpack will automatically strip out this code for the server side bundle and ensure it’s only included in the browser.

You can also technically import JS files from CSS if I recall correctly, so technically you could have a style block like:

style {
  @import "./path-to-my-js-polyfill";
  @import "./path-to-my-global-css";
}

Which should also work, although its a bit strange to import JS from css. It works because Marko ensures that all styles are passed to the webpack browser compiler so there is no issue of the JS only being on the server.

Hopefully that all makes sense :)

Khauri McClain
@Khauri
Thanks. I believe that put me on the right track. Another question: it seems that using ES import/export module style in component.js as opposed to CJS require/exports causes webpack to not export the class out of the webpack scope, and therefore the component.js isn't loaded. Do you know if there is any way around this that would enable me to use ES modules?
Nick Elder
@nckelder_twitter

I've been having a weird bug:
I'm using a for loop to render an array of objects with key data pairs. Then later I update this state object (after listening for an emit from the child). But then one of the values in the state changes unexpectedly. (The id field ends up being the wrong number).

I've put input.id in the HTML and I can see this is different from what state.id is when it hits the backend

Nick Elder
@nckelder_twitter
On closer inspection the stateid number its sending incorrectly is that of an element I previously deleted via refreshing the list of elements
I'm using server side rendering then the client is updating the dom after the delete
Dylan Piercey
@DylanPiercey
@nckelder_twitter it’s hard to guess what’s going on from the above alone. Are you able to create a more simplified reproduction of the issue?
Nick Elder
@nckelder_twitter
Wil do
Will do*
Elliot Grigor
@elliotgrigor
Hi all, not sure if I'm in the right place but it seems like this is the only place to ask for help. I picked up Marko not long ago and I'm gradually coming to terms with it. I'm using the lasso-express template but some things seem to be breaking my page. Whenever I add class { } or a *.component.js to my main view, lasso seems to stop working and I lose all my link and script tags. Is this by design? Should I be making a 'root' component in the body and placing everything into that instead of the main view?
Dylan Piercey
@DylanPiercey
@elliotgrigor you can see my response for this question here: https://gitter.im/marko-js/marko?at=5ef12a99fa0c9221fc54758b
Elliot Grigor
@elliotgrigor
@DylanPiercey thanks, bud. That helps a lot.
Dylan Piercey
@DylanPiercey
Happy to help :)
Elliot Grigor
@elliotgrigor
Everything seems to be working now, one small issue I'm getting is that this example: https://markojs.com/docs/events/#listening-to-events doesn't work. Using the concise syntax, I needed to separate the attributes with a comma and, for both syntaxes, use on-change(...) instead of on-change=...
Dylan Piercey
@DylanPiercey
on-change= is a typo in our docs, we should fix that. It should always be on-change(…)
Elliot Grigor
@elliotgrigor
Forget the comma part, it works without it.
Khauri McClain
@Khauri
Hey, I'm migrating from lasso and attempting to get a webpack-based development server set up. I'm mostly following the example from https://github.com/marko-js-samples/marko-webpack/blob/master/webpack.config.js . Everything is technically working, but every time I edit a marko fille it seems like it completely rebuilds all of the client files, which takes a while for our project. Is there a way around this?
Dylan Piercey
@DylanPiercey
@Khauri can you make sure you are on the latest patch release of @marko/webpack?
Khauri McClain
@Khauri
@DylanPiercey I upgraded to 6.0.1 but I'm not sure if that helped. Seems to still be running through everything
Elliot Grigor
@elliotgrigor
How do I use keys to remove an instance of a component from the DOM?
Dylan Piercey
@DylanPiercey

@elliotgrigor technically you can this.getComponent(“some-key”).destroy() but that would be an antipattern.

Instead you should remove the component via state, eg:

<if(state.shouldShow)>
  <some-conditional-component/>
</if>
Elliot Grigor
@elliotgrigor
Ah, that's a lot easier. Thanks, again.
Tim McLaughlin
@timmclaughlin
@DylanPiercey should we be able to use Webpack for development? seems like we are missing something if any file sets off a complete rebuild... or is there some other way to not rebuild everything kinda like how lasso did.
Tim McLaughlin
@timmclaughlin
or is anyone else building Marko with Webpack?
Dylan Piercey
@DylanPiercey

@timmclaughlin absolutely we want webpack to work for development. It’s something we’ve been trying to polish, but there are a few rough edges.

Having said that, it shouldn’t be rebuilding absolutely everything (although it will refresh the page) when running in watch mode. It will however need to re-evaluate the server bundle (assuming you are using the @marko/webpack plugin).

We haven’t yet explored adding hot reloading on the webpack side of things, but perhaps that could help there.

Dylan Piercey
@DylanPiercey
@Khauri could you explain what you mean by running through everything?
Khauri McClain
@Khauri
@DylanPiercey Here's roughly the multi-compiler webpack setup I'm using. https://gist.github.com/Khauri/59125177c32b1024e9385fc00bda11d2 which I'm running with webpack --watch --progress
We have a single entrypoint for the server side of the app called index.js. After the initial build, whenever I edit a file and observe the output I can see webpack rebuilding and re-emitting every file again. What's more s that all of the marko files on both the server and client are marked [not cacheable].
Khauri McClain
@Khauri
Unsure if this would help, but after running webpack --profile --json > compilation-stats.json and looking under the modules section in the generated output I could see that it was only .marko files that are marked as uncacheable. The component.jsfiles appear to be cacheable. Here's one of the module outputs
https://gist.github.com/Khauri/d2f775f82618f2f6ca0c46fa4f3e609b
Dylan Piercey
@DylanPiercey
@Khauri the issue is that Marko files are marked as non cachable in webpack because we don’t currently have a good way to tell webpack all of the folders and files that, although unreferenced in the compiled code, can cause the compilation to change. This is something that should be improved though. Would you mind creating an issue for it in @marko/webpack?
Kinsi
@kinsi55
Hey guys, I'm a fan of having websites that work as much as possible without requiring javascript to be enabled (So essentially, as long as theres no dynamic content JS should not be required). The way I've implemented this, up until now, was using serverside rendering and some custom clientside implementation for dynamic content + Pjax to significantly speed up the site despite serverside rendered content, however, this is obviously not ideal. I've recently stumbled upon Marko which seems like the ideal improvement to have serverside rendering and dynamic client things streamlined, and it advertises being server + clientside friendly (Specifically referring to the passage that says the client doesnt need to re-render something that the server already rendered) which seems perfect for my usage, however, I am wondering how one would ideally implement this in the real world. Is there some example for a mainly serverside rendered setup with some dynamic, clientside elements? I couldnt find one and I think having an example could help me out a lot, one thing I've specifically wondered if the entire websites templates need to get bundled for the client or if there is a way to have just the things that need to be rendered dynamically by the client bundled for the client
Also would adding support for esbuild possibly be a thing that could be considered? :P https://github.com/evanw/esbuild/
Dylan Piercey
@DylanPiercey
@kinsi55 by default Marko will omit bundling any templates which are not under a template that has a class or component.js file. If you don’t use class or component.js then viritually no JS is sent to the browser. There is also component-browser.js which gives you a subset of the Marko lifecycle (we call this a split component). Essentially it allows you to use onMount and allows you to attach event handlers. It does not give you access to this.state which means the component cannot re-render, and so the template itself is not bundled for the browser.
Kinsi
@kinsi55
I see, makes sense, sounds good, thank you!
argit2
@argit2
henlo
i've been looking into js frameworks
has anyone tried both marko and svelte and can tell me about their differences?
on the surface their usage and performance look very similar
Daniel Sokil
@s0kil
Where could we read about the upcoming features for Marko 5?
Dylan Piercey
@DylanPiercey
@s0kil expect an article within the next couple weeks that will be outlining what’s coming with Marko 5 :wink:.

Also, good morning everyone!

Many of you already know that we've been looking to expand the Marko team for a while now. We're excited to announce that @ryansolid will be joining us in a couple of weeks to help us take Marko into the future! He's written an article to announce this move that is definitely worth the read https://dev.to/ryansolid/i-m-joining-the-markojs-core-team-2fc1 :tada:

Tim McLaughlin
@timmclaughlin
great to see new members / contributors! if someone could maybe share some guidance, we would love to figure out how to get webpack working in a dev environment, or is that a Marko 5 feature. It's definitely creating some problems for us since Lasso takes 30 mins to pre-build and webpack only takes 2 mins, but won't run in dev mode because it seems to cache incorrectly.
Dylan Piercey
@DylanPiercey

@timmclaughlin can you explain what you mean by cache incorrectly and the issues you are seeing in dev mode for the webpack setup?

Marko 4 should work fine with webpack, although there are some perf issues we need to take a look at.

Dylan Piercey
@DylanPiercey
@/all we are slowly moving over to discord. Please joing us there! https://discord.gg/RFGxYGs