marko-js / examples

MarkoJS Examples

Getting Started

Step 1

foo@bar:$ npx @marko/create my-app

This command will give you a selection of examples to pick from.

Step 2

After picking a example, it will be downloaded and all dependencies will be installed. For most examples, you can quickly get up and running by using the following command:

foo@bar:$ cd ./my-app
foo@bar:$ npm run dev

If this command is missing, review the README.md for the chosen example.

Additional Resources

• marko-cli
• marko-serve

examples's Issues

Add support for running `TypeScript: Reload Project` in `*.marko` files

Summary

When using the library-ts template, TypeScript commands are not listed in the Command Palette if the editor is currently focused on a *.marko file. This causes occasional issues when the TypeScript server needs to be restarted after changing type definitions in a *.marko file.

Screenshots

Command Palette from an index.marko file

Command Palette from a TypeScript file

Workarounds

• Switch to a *.ts file, open the Command Palette to run any TypeScript-related command, then switch back to any *.marko file.
• If trying to use TypeScript: Restart TS Server or TypeScript: Reload Project, use Developer: Reload Window instead.

webpack-express should have @marko/express as a production dependency

When I install with npm install --only=production, I expect to be able to execute the example, but @marko/express is marked as a development dependency and thus fails to start.

Multipage Application

Hi,

Can you please explain how the routing mechanism works in Marko to build multipage applications ?

Thank you!

TypeError in Vite HTTP Example

Reproduction

Download the vite-http template.

npx @marko/create marko-app --template vite-http
cd marko-app
npm run dev

After opening localhost:3000, the terminal and browser display the following error:

TypeError: Cannot read property 'headers' of undefined
    at new Accepts (/Users/ajcwebdev/marko-app/node_modules/accepts/index.js:37:22)
    at Proxy.Accepts (/Users/ajcwebdev/marko-app/node_modules/accepts/index.js:34:12)
    at Module.send (/src/send.js:15:27)
    at handler (src/index.js:7:6)
    at file:///Users/ajcwebdev/marko-app/index.js:34:15

Cloudflare HackerNews Deploy Fix --

Hi, the Cloudflare HackerNews deployment is currently broken.
As per CF instructions, please add a line:
main = "dist/worker.js"
to the wrangler.toml to get it deployable again! :)

worked for me.

Include package-lock with examples

By including the package-lock the initial installs from marko-create will be faster.
Before we do this though we should write a periodic github action that updates the lock files or use green-keeper/whatever.

ssrFixStacktrace causes server to crash on some errors

Certain errors such as ReferenceError cause the dev server to crash with the error Error: line must be greater than 0 (lines start at line 1). This can be reproduced by for instance going to a file like src/components/app-button/index.marko and commenting out an input // size = "normal", which results in the error ReferenceError: size is not defined. Since this is a common error to expect during development, I would expect the dev server not to crash. It seems that vite is finding an unexpected empty stacktrace element in the above error.

npm scripts set NODE_ENV assuming Unix shell

The scripts in examples/webpack/package.json sets NODE_ENV assuming a unix shell. This prevents the scripts from working in Windows environments.

DylanPierceyToday at 9:21 AM
We should probably update that to use https://www.npmjs.com/package/cross-env

lasso-express throwing syntax error on start

Running npm run dev works as expected, but npm run start is throwing an error.

> NODE_ENV=production node -r @babel/register -r marko/node-require src/server.js

/home/xxx/projects/lasso-express/node_modules/marko/dist/node-require/index.js:3
const complain;
      ^^^^^^^^

SyntaxError: Missing initializer in const declaration
    at wrapSafe (internal/modules/cjs/loader.js:988:16)
    at Module._compile (internal/modules/cjs/loader.js:1036:27)
    at Module._compile (/home/xxx/projects/lasso-express/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Object.newLoader [as .js] (/home/xxx/projects/lasso-express/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/home/xxx/projects/lasso-express/node_modules/marko/node-require.js:7:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `NODE_ENV=production node -r @babel/register -r marko/node-require src/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/xxx/.npm/_logs/2021-09-01T05_55_58_610Z-debug.log

Here's the log that npm gave.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/home/xxx/.nvm/versions/node/v14.17.6/bin/node',
1 verbose cli   '/home/xxx/.nvm/versions/node/v14.17.6/bin/npm',
1 verbose cli   'run',
1 verbose cli   'start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~start: PATH: /home/xxx/.nvm/versions/node/v14.17.6/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/xxx/projects/lasso-express/node_modules/.bin:/home/xxx/.nvm/versions/node/v14.17.6/bin:/usr/local/bin:/usr/bin:/bin:/usr/local/games:/usr/games
9 verbose lifecycle [email protected]~start: CWD: /home/xxx/projects/lasso-express
10 silly lifecycle [email protected]~start: Args: [
10 silly lifecycle   '-c',
10 silly lifecycle   'NODE_ENV=production node -r @babel/register -r marko/node-require src/server.js'
10 silly lifecycle ]
11 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
12 info lifecycle [email protected]~start: Failed to exec start script
13 verbose stack Error: [email protected] start: `NODE_ENV=production node -r @babel/register -r marko/node-require src/server.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/xxx/.nvm/versions/node/v14.17.6/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (/home/xxx/.nvm/versions/node/v14.17.6/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:400:28)
13 verbose stack     at maybeClose (internal/child_process.js:1055:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/xxx/projects/lasso-express
16 verbose Linux 4.19.0-12-amd64
17 verbose argv "/home/xxx/.nvm/versions/node/v14.17.6/bin/node" "/home/xxx/.nvm/versions/node/v14.17.6/bin/npm" "run" "start"
18 verbose node v14.17.6
19 verbose npm  v6.14.15
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: `NODE_ENV=production node -r @babel/register -r marko/node-require src/server.js`
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Static Files Not Being Served

The Marco logo (logo.png) is not being properly served using the "fastify-static" plugin. When you start the application, the in the browser is looking for the logo at localhost:3000/logo.png which points to the root static folder at ".\static". Suffice it to say, the logo is not in that folder. Although an obvious response, would be to move the logo into the static folder, this breaks the "component-like" development pattern, and is manually intensive when there are hundreds or thousands of static images. The better resolution would be to enable the bundler to copy the static assets into another 'static folder automatically in a manner that separates each component's static assets. How can the latter be done with lasso?

vite-fastify is not working

TypeError: Cannot read properties of undefined (reading 'Symbol(fastify.state)')
at ready (C:\Users\Administrator\Downloads\examples-master\examples-master\node_modules\fastify\fastify.js:580:13)
at file:///C:/Users/Administrator/Downloads/examples-master/examples-master/examples/vite-fastify/index.js:22:15

Add template for npm module

Via Slack: We can add a module example that sets things up as you say with typescript support, test runner etc. Then you could npm init marko -- --template module and get up and running.

webpack-express example is broken for "legacy" browsers

Overview

The webpack build for legacy browsers raises the following

Uncaught ReferenceError: regeneratorRuntime is not defined

Steps to reproduce

• Force res.locals.buildName = "browser:legacy"
• Do a production build
• Visit site

webpack-express TypeError: this._source.listMap is not a function

Hello,

• vite-express marko-js/vite#7
• rollup-express marko-js/rollup#24
• webpack-express TypeError: this._source.listMap is not a function

rollup-express example results in error

After following the instructions from examples repository to try out rollup-express example, it results in js error and on the user interface, we are unable to interact with dynamic components. This happens in both dev and prod mode.

---

webpack-express example is serving JS when none is needed

Overview

On static pages that don't need JS, some JS is still emitted. It looks to be empty Webpack overheads.

Steps to reproduce

• Remove all JS code by removing <app-main /> from src/pages/index/template.marko
• Do a production build (to avoid Hot Module Reloading causing false alarms)
• Visit the static page

Vite example not working on windows 10

The current marko-vite example as-is does not work under windows environments.

First Error would be:

PS D:\DEV\marko-vite> npm run dev

> [email protected] dev D:\DEV\marko-vite
> node --enable-source-maps index.js

Listening on port 3000
12:34:56 [vite] Internal server error: ENOENT: no such file or directory, open 'D:\DEV\marko-vite\D:\DEV\marko-vite\src\pages\index\template.marko'

Which can be fixed by adding root: "./" to the vite.config object. Afterwards you can run the example in dev mode 🎉

---

Cue the next problem:

building for production:

PS D:\DEV\marko-vite> npm run build

> [email protected] build D:\DEV\marko-vite
> rimraf dist && npm run build:server && npm run build:client


> [email protected] build:server D:\DEV\marko-vite
> cross-env NODE_ENV=production vite build --ssr src/index.js

vite v2.4.4 building SSR bundle for production...
✓ 32 modules transformed.
dist/index.js   101.14kb

> [email protected] build:client D:\DEV\marko-vite
> cross-env NODE_ENV=production vite build

vite v2.4.4 building for production...
✓ 4 modules transformed.
[vite]: Rollup failed to resolve import "src\\pages\\index\\template.marko?marko-browser-entry" from "src\pages\index\template.marko.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "src\\pages\\index\\template.marko?marko-browser-entry" from "src\pages\index\template.marko.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (D:\DEV\marko-vite\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:51765:19)
    at onwarn (D:\DEV\marko-vite\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:51550:13)
    at Object.onwarn (D:\DEV\marko-vite\node_modules\rollup\dist\shared\rollup.js:20494:13)
    at ModuleLoader.handleResolveId (D:\DEV\marko-vite\node_modules\rollup\dist\shared\rollup.js:19843:26)
    at D:\DEV\marko-vite\node_modules\rollup\dist\shared\rollup.js:19790:22
    at async Promise.all (index 0)
    at async ModuleLoader.fetchStaticDependencies (D:\DEV\marko-vite\node_modules\rollup\dist\shared\rollup.js:19788:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (D:\DEV\marko-vite\node_modules\rollup\dist\shared\rollup.js:19764:9)
    at async Promise.all (index 0)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:client: `cross-env NODE_ENV=production vite build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

With this error my knowledge of vite ends. I'm terribly sorry if this is an error with vite and not any part of the marko "ecosystem".

Everything is working on a random linux distro aswell as raspbian 10; but production building is not working on windows 10.
The webpack example (or rather my project build upon the webpack example) works on my machine (win10).

Package versions

• Node 14 / 15
• @marko/express 1.0.0
• @marko/vite 2.0.0
• @marko/compiler 5.15.0
• marko 5.15.1
• compression 1.7.4
• express 4.17.1
• raptor-pubsub 1.0.5
• cross-env 7.0.3
• marked 2.1.3
• rimraf 3.0.2
• vite 2.4.4

Flash of unstyled content during dev

I'm trying the vite-fastify demo app.

During dev, whenever I refresh the page, I see a flash of unstyled content. After building and doing npm run start this disappears.

Is there a way to prevent this?

How can we do a library build using marko

I have been trying to do a library build for Vite-react project , is there a way in which it is possible with Marco