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.
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 :)
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?
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
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?
on-change(...) instead of on-change=...
@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.
webpack --watch --progressWe 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].
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 outputshttps://gist.github.com/Khauri/d2f775f82618f2f6ca0c46fa4f3e609b
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.
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:
<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>