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 23:03

    DylanPiercey on master

    Improve optimization for nested… (compare)

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

    DylanPiercey on master

    Fix 'marko is using deprecated … (compare)

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

    DylanPiercey on fix-marko-deprecated-warning

    Fix 'marko is using deprecated … (compare)

  • Jan 31 19:08
    codecov[bot] commented #1249
  • Jan 31 19:07
    codecov[bot] commented #1249
  • Jan 31 19:07
    codecov[bot] commented #1249
  • Jan 31 19:06
    codecov[bot] commented #1249
Taylor Hunt
@tigt
awesome
@DylanPiercey: it looks like the 1.2.4 @marko/webpack is appending assets after <body>?
<main id="content"><h1>Hello!</h1></main><footer class="SiteFoot"></footer><script>window.$mwp="/sa/";(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,b.head.appendChild(a))})})(document,["/sa/Home_A33h~Search_wYEn~SignIn_TR6h-5f888ea.js","/sa/Home_A33h-3453059.js"])</script><link rel="stylesheet" href="/sa/Home_A33h~Search_wYEn~SignIn_TR6h-9d1bf3c.css"></body></html>
Well, to the end of <body>
not after it
Not a dealbreaker for me but it doesn't look like what you intended
Dylan Piercey
@DylanPiercey
@tigt it should fallback to being at the end of the body unless a <head> is discovered. Is this not working for you?
Taylor Hunt
@tigt
that explains that
I did not include a <head>
Dylan Piercey
@DylanPiercey
I could also make it detect a <body> and prepend it there. My assumption was that most apps would have a <head>
Taylor Hunt
@tigt
I had only left it off for micro-optimization reasons
not a big deal for me to add it
maybe a warning when it does that fallback in the console?
Dylan Piercey
@DylanPiercey
Yeah, that is a good call.
A
@ybitso

I can output data if i have just $!{state.Value}
but wrapped like this - it throws an error

<input.input.is-static value=$!{state.Value} readonly/>
Invalid JavaScript expression for attribute "value": Error: 
Unexpected token !: $!{state.Value}
                      ^

Carrot is at !{

Dylan Piercey
@DylanPiercey

@ybitso unescaped attribute values were never supported and previously did nothing. It may have been updated to now error. In your case the template should just be

<input.input.is-static value=state.Value readonly/>

There is no need for interpolating in the attribute values, any valid javascript expression* should just work!

J. G. Sebring
@Sebring
I'm a big fan of the concise syntax, once one get used to it the classic html feels so cumbersome and dull
J. G. Sebring
@Sebring
I haven't quite figured how to let my own components take classnames or ids using the short . or # - notation.
For example my-button.is-disabled
Dylan Piercey
@DylanPiercey
@Sebring they should be passed through just as a class property on the input.
J. G. Sebring
@Sebring
oh my, yes indeed.. I was so sure i tried this already. Thanks
Gavin McFarland
@limitlessloop
Hello! Are there an examples of how to use PostCSS with Marko?
Dylan Piercey
@DylanPiercey
@limitlessloop when using the inline style block, or external style.x files Marko will automatically defer to the appropriate plugin/loader for your bundler. Eg with webpack you’d want postcss-loader.
Gavin McFarland
@limitlessloop
Hi Dylan, thanks for your reply. Does it automatically process styles for files that end in style.css and style blocks without the prefix for postcss by any chance? Or is this handled by the loader anyway?
Dylan Piercey
@DylanPiercey
In webpack for the postcss loader rule you would have something like test: /\.css$/. That is going to tell webpack to process all css files with the loader (in your case postcss). Marko basically just makes the css available to the bundler as if it was a standard css file.
Gavin McFarland
@limitlessloop
Make sense. Thank you
I tried to use this Rollup example repo but I ran into an error. It doesn’t look like Marko has been updated with more recent versions of Rollup. I was able to update the dependencies and fix some errors. But I hit a snag with an issue. Not sure if you or anyone else understands it better than me?
Dylan Piercey
@DylanPiercey
The sample needs to be updated. Previously recommended configure for rollup (which doesn’t really look anymore) was to use the (now mostly abandoned) browserify plugin with an adapter for rollup. A couple weeks ago I released an official Marko Rollup plugin (https://github.com/marko-js/rollup) but the documentation and samples are still needing to be updated.
Gavin McFarland
@limitlessloop
Nice, it’s great to see this. I prefer rollup if I can. Will make time to try this out.
Dylan Piercey
@DylanPiercey
:thumbsup: with the rollup plugin being so new you may run into some issues, but the test coverage is pretty decent. It is not quite as fully featured as our webpack or lasso setups, but that will come soon. There also will likely be a major version release of the plugin soon which makes a small breaking change to https://github.com/marko-js/rollup#multiple-copies-of-marko
I’m happy to help though :smile:
Gavin McFarland
@limitlessloop
Sounds promising. I’ll let you know how I get on when I get chance to give it a go.
Gavin McFarland
@limitlessloop
Hi @DylanPiercey I just wanted to let you know I had a quick go using the Rollup plugin. I ran into a few issues. First was that I had to install the mz package manually. The second was that with your example code I got the following errow Error: [object Object] is not a PostCSS plugin. If I comment out the postcss block in your example it runs but then in the browser console I get the following error Uncaught TypeError: commonjsRequire.resolve is not a function. I used the marko-rollup as a base and upgraded it to use the new Marko Rollup plugin.
Let me know if you’re aware of any of these things and/or if you would like me to create issues for them
Gavin McFarland
@limitlessloop

I had a lot of fun trying Marko. I especially like the syntax, it’s a dream to use. Unfortunately I had quite a few issues getting things to work, so I thought I’d share my experiences in here.

I had the most luck with using the starter kit using marko create my-poject although it doesn’t work with Node v12 so I had to downgrade to v11.5.0 to use the cli. The build feature is somewhat broken. When you create a build it doesn’t include the static css and js in the build. I beleive this has something to do with Lasso. Maybe lasso has been updated recently and Marko Starter needs updating to work with Lasso for static builds. Another issue I encountered was the browser doesn’t refresh when changes are made, but I wasn’t able to find a way to fix it. Overall I really enjoyed using Marko, the templating structure for components is genius and really makes creating a static site a dream, but unfortunately without being able to build it as a static site I wasn’t able to use it. I had a go trying to get Rollup to work with it but I ran into troubles there, I’m not too familiar with what bundlers and loaders do so don’t fully know what I’m doing. I look forward to seeing updates to Marko and it’s supporting repos in the near future. If anyone has any knowledge of the issues I described please feel free to get in touch.

Gavin McFarland
@limitlessloop
Can anyone confirm if marko-starter does any kind of minification on styles? I’m facing an issue where my imported styles are being processed on marko-starter serve but not on marko-starter static-serve or marko-starter build. When I look at the styles that have been built I can see neither the styles have been imported nor is the @import statement there, so I’m thinking something is removing the @import statement before postcss get’s chance to process it.
As I suspected. I tried minify: false but then discovered there is minifyCSS. Disabling the minification fixes the issue of the styles not being imported.
Dylan Piercey
@DylanPiercey

@limitlessloop truthfully marko-starter has a number of things we are not happy with. If you are starting a fresh project I’d highly recommend just cloning down https://github.com/marko-js-samples/marko-webpack as it is currently the direction we are recommending for most apps.

Regarding your actual issue marko-starter will use lasso’s config and so the style minification is deferred to lasso. How have you enabled postcss?

Gavin McFarland
@limitlessloop
Thanks, I’ll give marko-webpack a go. I was mainly trying to get marko-starter to work because it had everything setup for me including the routing, but if you recommend marko-webpackI’ll give that a try. I’m using lasso-postcss currently. I got it working by dissabling the CSS minification handled by lasso.

module.exports = require("marko-starter").projectConfig({
    name: "marko-starter-demo", // Optional, but added here for demo purposes
    lassoConfig: {
        plugins: [
            'lasso-marko',
            {
                plugin: 'lasso-postcss',
                config: {
                    map: isProduction ? false : 'inline',
                }
            },
        ],
        minifyCSS: false, // must disable for postcss-import to work
    },
});
Gavin McFarland
@limitlessloop
@DylanPiercey can marko-webpack build a static site?
Dylan Piercey
@DylanPiercey
Ah dang. No it does not.
Gavin McFarland
@limitlessloop
That’s my main issue/trouble. I need it for SEO reasons. Thanks though
If I had more time I’d try building something from scratch.
Gavin McFarland
@limitlessloop

I thought I’d have a quick go at greating a prerendered static site using a plugin. However the first issue I have is that the plugin needs a index.html file where all the assets are injected into it. I found a webpack plugin that allows you to create html files during compilation but I don’t know how to specify the template for it to use.

This is the configuration to create an index.html file from a template.

new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'src/pages/home/template.marko'),
        filename: path.resolve(__dirname, 'dist/index.html')
      }),

When I do this however I get the error.

Error: /Users/limitlessloop/Repos/marko-webpack/src/pages/home/template.marko:298
  var markoUID = window.$MUID || (window.$MUID = { i: 0 });
                 ^
  ReferenceError: window is not defined

Is there any easy way I can get an index file written to disk like the one the server generators when I run a build?

Gavin McFarland
@limitlessloop
The above plugin is being used inside the client compiler, but if I use it inside the server compiler I get…
Error: /Users/limitlessloop/Repos/marko-webpack/src/pages/home/template.marko:4148
  var env = process.env || {};
            ^
  ReferenceError: process is not defined
Gavin McFarland
@limitlessloop
I’ve been looking at how to deploy node applications to see if this could be a possibility for me instead of creating a static site. Are there any services anyone can suggest which make it easy to deploy Node applications?
Dylan Piercey
@DylanPiercey

@limitlessloop the HTMLWebpackPlugin is not currently compatible with Marko. Primarily Marko is designed to be server side rendered and then hydrated, although we want to have better support for static sites.

Regarding hosting services https://zeit.co is great!

Gavin McFarland
@limitlessloop
Thanks for your reply. As you can probably tell, I’m very desperate to get something working with Marko. My day job is a designer and it’s very easy to work with compared to other frameworks. :) I’m a little familiar with Zeit so I’m just trying now to see if I can deploy to it.
Gavin McFarland
@limitlessloop
The closest I could get with Now was using this configuration, except the stylesheets (static files doesn’t link)
// now.json
{
    "name": “marko",
    "version": 2,
    "builds": [{
        "src": "dist/server/main.js",
        "use": "@now/node-server"
    }],
    "routes": [{
        "src": "/",
        "dest": "dist/server/main.js",
        "methods": ["GET"]
    }]
}
Gavin McFarland
@limitlessloop
I managed to get it working. There might be some things I haven’t fully tested, but this works with the default build.
// now.json
{
    "name": "test",
    "version": 2,
    "builds": [{
        "src": "dist/server/main.js",
        "use": "@now/node-server"
    }, {
        "src": "dist/client/**",
        "use": "@now/static"
    }],
    "routes": [{
            "src": "/static/(.*)",
            "dest": "dist/client/$1",
            "headers": {
                "cache-control": "s-maxage=604800"
            },
            "methods": ["GET"]
        },
        {
            "src": "/(.*)",
            "dest": "dist/server/main.js",
            "methods": ["GET"]
        }
    ]
}