Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Nick Elder
@nckelder_twitter
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
Ranaom-4
@Ranaom-4
Hi
Dylan Piercey
@DylanPiercey
Hi @Ranaom-4! We’ve moved to discord, please join us over there 🙂
Jesse Pinheiro
@jesse1983
Hi guys! It’s possible to create web components (custom elements) with MarkoJS?
Joshua Amaju
@joshua_amaju_twitter
Hi everyone, I'm new to marko. I've been trying to get my marko-express starter to work in the browser (rehydration), but it's not working. I've searched online, but couldn't find any working example. Can anyone help me with out.
Nick Elder
@nckelder_twitter
Hey, having some difficulties translating some old patterns into Marko, when I have a script imported globally I cant access it in the onCreate (accessing io from socketio client library). Here is roughly what I'm trying to do:
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script>
    $(document).ready(function() {
        const socket = io('https://mywebsite.com:5000');
        socket.on('new_photo', data => {
            console.log(data);

            //Marko state updates
            state.imagea = data.url;
        });
    });
</script>
I cant seem to get socketio client in the scope of the onCreate in Marko, and I can't seem to access state from the document body outside marko
(posted to Discord)
Ryan Carniato
@ryansolid
In case anyone else comes in. We have moved to Discord: https://discord.gg/RFGxYGs
minimouse1234
@minimouse12341_twitter
?
deepkhajanchi
@deepkhajanchi
Hello everyone
I am very beginner to markojs and could not able to execute npm run dev. What should be fix for that?
Error: . is neither a posix nor a windows path, and there is no 'join' method defined in the file system.
This is the error, I am getting for npm run dev.
daohientang
@daohientang

Hi There,

I am new to markojs and having an issue where images on background-image are not display.
For example:

<div style="background-image: url('./bg1.jpeg');">
test
</div>

However this tag is working:
<img src="./bg1.jpeg"/>

Can anyone point me to what I need to do to get this working.

Much appreciated

Dylan Piercey
@DylanPiercey

@daohientang we're not actively monitoring this channel, please join us on discord: https://discord.gg/marko

Having said that for your issue, the problem is that we actually special case the img src attribute. When you start having raw strings like background images it requires a bit more of a verbose api which would be specific to your bundler. For webpack it'd look like:

import bgURL from "./bg1.png";

<div style=`background-image: url(${bgURL});`>
  test
</div>
Glisten **STAR**
@GlistenSTAR
hello, everyone. I am new on here.
Dylan Piercey
@DylanPiercey
@GlistenSTAR we're not actively monitoring this channel, please join us on discord: https://discord.gg/marko