@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 --progress
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.js
files appear to be cacheable. Here's one of the module outputsclass
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>
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
@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>
component.input = props
component.update()