create-lwr 0.16.2 → 0.16.4

package/package.json

@@ -22,14 +22,14 @@
     },
     "type": "module",
     "types": "build/es/index.d.ts",
-    "version": "0.16.2",
+    "version": "0.16.4",
     "module": "build/es/index.js",
     "main": "build/cjs/index.cjs",
     "files": [
         "build/**/*.js",
         "build/**/*.cjs",
         "build/**/*.d.ts",
-        "template-*"
+        "template-*/**"
     ],
     "exports": {
         "import": "./build/es/index.js",
@@ -46,5 +46,5 @@
     "volta": {
         "extends": "../../package.json"
     },
-    "gitHead": "062cc0e7d23b70b1c97cdd8acde90caee4e644f8"
+    "gitHead": "66c3fb551a00f76bd5d7cfa176ff7b72fa20d0f2"
 }

package/template-lwc/README.md

@@ -0,0 +1,70 @@
+# LWC Boilerplate Example
+
+The **LWC Boilerplate** example contains the minimum code needed to get a simple Single Page Application (SPA) on LWR running.
+
+## Project Setup
+
+The directory structure looks like this:
+
+```fs
+src/
+  ├── assets/           // static assets
+  │   └── recipes-logo.png
+  |   └── favicon.ico
+  └── modules/          // lwc modules
+      └── example/
+          └── app/
+              ├── app.css
+              ├── app.html
+              └── app.js
+lwr.config.json         // lwr configuration
+package.json            // npm packaging configuration
+```
+
+## Configuration
+
+The LWR server is configured in `lwr.config.json`, at the root of the project. The **LWC Boilerplate** example has one LWC module and one server-side route.
+
+```json
+// lwr.config.json
+{
+    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" }] },
+    "routes": [
+        {
+            "id": "example",
+            "path": "/",
+            "rootComponent": "example/app"
+        }
+    ],
+    "assets": [
+        {
+            "alias": "assetsDir",
+            "dir": "$rootDir/src/assets",
+            "urlPath": "/public/assets"
+        },
+        {
+            "alias": "favicon",
+            "file": "$rootDir/src/assets/favicon.ico",
+            "urlPath": "/favicon.ico"
+        }
+    ]
+}
+```
+
+## Running the Project in dev Mode
+
+```bash
+yarn install
+yarn dev # dev:compat for AMD format
+```
+
+Open the site at [http://localhost:3000](http://localhost:3000)
+
+## Statically Generate and Preview the Site
+
+```bash
+yarn build # dev:prod-compat for AMD format
+yarn start
+```
+
+Open the site at [http://localhost:3000](http://localhost:3000)

package/template-lwc/lwr.config.json

@@ -0,0 +1,22 @@
+{
+    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" }] },
+    "routes": [
+        {
+            "id": "example",
+            "path": "/",
+            "rootComponent": "example/app"
+        }
+    ],
+    "assets": [
+        {
+            "alias": "assetsDir",
+            "dir": "$rootDir/src/assets",
+            "urlPath": "/public/assets"
+        },
+        {
+            "alias": "favicon",
+            "file": "$rootDir/src/assets/favicon.ico",
+            "urlPath": "/favicon.ico"
+        }
+    ]
+}

package/template-lwc/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "lwr-lwc",
+    "version": "0.0.1",
+    "license": "MIT",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "clean": "rimraf node_modules __lwr_cache__ site",
+        "dev": "lwr dev",
+        "dev:compat": "lwr dev --mode compat",
+        "build": "lwr build --clean",
+        "build:prod-compat": "lwr build --clean --mode prod-compat",
+        "start": "lwr start",
+        "stage": "yarn build && yarn start",
+        "stage:prod-compat": "yarn build:prod-compat && yarn start"
+    },
+    "dependencies": {
+        "lwc": "latest",
+        "lwr": "latest"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "volta": {
+        "node": "20.16.0"
+    }
+}

package/template-lwc/src/modules/example/app/app.css

@@ -0,0 +1,10 @@
+main {
+    margin: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+h1 {
+    color: #1798c1;
+}

package/template-lwc/src/modules/example/app/app.html

@@ -0,0 +1,6 @@
+<template>
+    <main>
+        <img src="/public/assets/recipes-logo.png" alt="logo" />
+        <h1>Hello World!</h1>
+    </main>
+</template>

package/template-lwc/src/modules/example/app/app.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class HelloWorldApp extends LightningElement {}

package/template-lwc-ts/README.md

@@ -0,0 +1,70 @@
+# LWC-TS Boilerplate Example
+
+The **LWC TS Boilerplate** example contains the minimum code needed to get a simple Single Page Application (SPA) on LWR running in Typescript.
+
+## Project Setup
+
+The directory structure looks like this:
+
+```fs
+src/
+  ├── assets/           // static assets
+  │   └── recipes-logo.png
+  |   └── favicon.ico
+  └── modules/          // lwc modules
+      └── example/
+          └── app/
+              ├── app.css
+              ├── app.html
+              └── app.ts
+lwr.config.json         // lwr configuration
+package.json            // npm packaging configuration
+```
+
+## Configuration
+
+The LWR server is configured in `lwr.config.json`, at the root of the project. The **LWC TS Boilerplate** example has one LWC module and one server-side route.
+
+```json
+// lwr.config.json
+{
+    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" }] },
+    "routes": [
+        {
+            "id": "example",
+            "path": "/",
+            "rootComponent": "example/app"
+        }
+    ],
+    "assets": [
+        {
+            "alias": "assetsDir",
+            "dir": "$rootDir/src/assets",
+            "urlPath": "/public/assets"
+        },
+        {
+            "alias": "favicon",
+            "file": "$rootDir/src/assets/favicon.ico",
+            "urlPath": "/favicon.ico"
+        }
+    ]
+}
+```
+
+## Running the Project in dev Mode
+
+```bash
+yarn install
+yarn dev # dev:compat for AMD format
+```
+
+Open the site at [http://localhost:3000](http://localhost:3000)
+
+## Statically Generate and Preview the Site
+
+```bash
+yarn build # dev:prod-compat for AMD format
+yarn start
+```
+
+Open the site at [http://localhost:3000](http://localhost:3000)

package/template-lwc-ts/lwr.config.json

@@ -0,0 +1,22 @@
+{
+    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" }] },
+    "routes": [
+        {
+            "id": "example",
+            "path": "/",
+            "rootComponent": "example/app"
+        }
+    ],
+    "assets": [
+        {
+            "alias": "assetsDir",
+            "dir": "$rootDir/src/assets",
+            "urlPath": "/public/assets"
+        },
+        {
+            "alias": "favicon",
+            "file": "$rootDir/src/assets/favicon.ico",
+            "urlPath": "/favicon.ico"
+        }
+    ]
+}

package/template-lwc-ts/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "lwr-lwc-ts",
+    "version": "0.0.1",
+    "license": "MIT",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "clean": "rimraf node_modules __lwr_cache__ site",
+        "dev": "lwr dev",
+        "dev:compat": "lwr dev --mode compat",
+        "build": "lwr build --clean",
+        "build:prod-compat": "lwr build --clean --mode prod-compat",
+        "start": "lwr start",
+        "stage": "yarn build && yarn start",
+        "stage:prod-compat": "yarn build:prod-compat && yarn start"
+    },
+    "dependencies": {
+        "lwc": "latest",
+        "lwr": "latest"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "volta": {
+        "node": "20.16.0"
+    }
+}

package/template-lwc-ts/src/modules/example/app/app.css

@@ -0,0 +1,10 @@
+main {
+    margin: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+h1 {
+    color: #1798c1;
+}

package/template-lwc-ts/src/modules/example/app/app.html

@@ -0,0 +1,6 @@
+<template>
+    <main>
+        <img src="/public/assets/recipes-logo.png" alt="logo" />
+        <h1>Hello World!</h1>
+    </main>
+</template>

package/template-lwc-ts/src/modules/example/app/app.ts

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class HelloWorldApp extends LightningElement {}

package/template-markdown-static-site/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/template-markdown-static-site/README.md

@@ -0,0 +1,77 @@
+# Static Site Boilerplate Example
+
+The **Static Site** example contains the minimum code needed to get up and running with a LWR website.
+
+## Project Setup
+
+The directory structure looks like this:
+
+```fs
+src/
+  ├── assets/           // static assets
+  |   └── favicon.ico
+  │   └── css/
+  │       └── main.css
+  └── content/          // site pages
+  │   ├── about.md
+  │   └── home.md
+  └── layouts/          // site page layouts
+      └── main_layout.njk
+lwr.config.json         // lwr configuration
+package.json            // npm packaging configuration
+```
+
+## Configuration
+
+The LWR server is configured in `lwr.config.json`, at the root of the project. The **Static Site** example has two routes/pages.
+
+```json
+// lwr.config.json
+{
+    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" }] },
+    "routes": [
+        {
+            "id": "Home",
+            "path": "/",
+            "contentTemplate": "$contentDir/home.md",
+            "layoutTemplate": "$layoutsDir/main_layout.njk"
+        },
+        {
+            "id": "About",
+            "path": "/about",
+            "contentTemplate": "$contentDir/about.md",
+            "layoutTemplate": "$layoutsDir/main_layout.njk"
+        }
+    ],
+    "assets": [
+        {
+            "alias": "assetsDir",
+            "dir": "$rootDir/src/assets",
+            "urlPath": "/public/assets"
+        },
+        {
+            "alias": "favicon",
+            "file": "$rootDir/src/assets/favicon.ico",
+            "urlPath": "/favicon.ico"
+        }
+    ]
+}
+```
+
+## Running the Project in dev Mode
+
+```bash
+yarn install
+yarn dev
+```
+
+Open the site at [http://localhost:3000](http://localhost:3000)
+
+## Statically Generate and Preview the Site
+
+```bash
+yarn build
+yarn start
+```
+
+Open the site at [http://localhost:3000](http://localhost:3000)

package/template-markdown-static-site/lwr.config.json

@@ -0,0 +1,30 @@
+{
+    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" }] },
+    "routes": [
+        {
+            "id": "Home",
+            "path": "/",
+            "contentTemplate": "$contentDir/home.md",
+            "layoutTemplate": "$layoutsDir/main_layout.njk"
+        },
+        {
+            "id": "About",
+            "path": "/about",
+            "contentTemplate": "$contentDir/about.md",
+            "layoutTemplate": "$layoutsDir/main_layout.njk"
+        }
+    ],
+    "assets": [
+        {
+            "alias": "assetsDir",
+            "dir": "$rootDir/src/assets",
+            "urlPath": "/public/assets"
+        },
+        {
+            "alias": "favicon",
+            "file": "$rootDir/src/assets/favicon.ico",
+            "urlPath": "/favicon.ico"
+        }
+    ],
+    "moduleProviders": []
+}

package/template-markdown-static-site/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "lwr-markdown-static-site",
+    "version": "0.0.1",
+    "license": "MIT",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "clean": "rimraf node_modules __lwr_cache__ site",
+        "dev": "lwr dev",
+        "build": "lwr build --clean",
+        "start": "lwr start",
+        "stage": "yarn build && yarn start"
+    },
+    "dependencies": {
+        "lwr": "latest"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "volta": {
+        "node": "20.16.0"
+    }
+}

package/template-markdown-static-site/src/assets/css/main.css

@@ -0,0 +1,95 @@
+:root {
+    --color-bg-hero: #e4f2f8;
+    --color-bg-hero-dark: #d5e8f0;
+    --color-bg-section: #ffffff;
+    --color-bg-section-shade: #f4f5f6;
+    --color-bg-footer: #f7f7f7;
+    --color-bg-card: #e4f2f8;
+    --color-bg-search: #f4f5f6;
+    --color-text-link-footer: #707070;
+    --primary-color-blue: #02a0e0;
+    --primary-color-darkblue: #16325c;
+    --primary-color-blue-highlight: #def1fa;
+    --spotlight-bg: #ffffff;
+    --sidebar-width: 250px;
+    --sidebar-width-full: 300px;
+    --border-gray: #eee solid 2px;
+    --card-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+        0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    --trigger-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
+    --nav-box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
+
+    /* button colors */
+    --button-color: #ffffff;
+    --button-color-bg: #02a0e0;
+    --button-color-bg-active: #007aac;
+    --button-brand-color-bg: #ff6000;
+    --button-brand-color-bg-active: #df5400;
+}
+
+body {
+    display: grid;
+    justify-content: center;
+    margin: 20px;
+}
+
+.wrapper {
+    width: 900px;
+    display: grid;
+    grid-template-columns: 100%;
+    gap: 3em;
+}
+
+header {
+    width: 200px;
+    justify-self: center;
+}
+
+nav {
+    justify-self: center;
+}
+
+nav ul {
+    display: flex;
+    gap: 2em;
+}
+
+nav ul li a {
+    padding: 12px 20px;
+    font-size: 1.5em;
+    background-color: var(--primary-color-blue-highlight);
+    border-radius: 7px;
+    color: var(--primary-color-blue);
+    text-decoration: none;
+}
+
+html {
+    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
+        'Lucida Grande', sans-serif;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 1.6;
+    box-sizing: border-box;
+}
+
+nav ul li a:hover {
+    background-color: var(--primary-color-darkblue);
+    color: white;
+    transition: background-color .25s;
+}
+
+main {
+    min-width: 100%;
+    justify-self: start;
+}
+
+ul {
+    list-style: none;
+    margin-top: 0;
+    padding-left: 0;
+}
+
+h1 {
+    font-size: 2rem;
+    font-weight: 300;
+}

package/template-markdown-static-site/src/content/about.md

@@ -0,0 +1,5 @@
+# About LWR
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet facilisis magna etiam tempor. Lobortis elementum nibh tellus molestie nunc non blandit massa. In ornare quam viverra orci sagittis eu volutpat odio. Ultricies mi eget mauris pharetra et. Mi tempus imperdiet nulla malesuada pellentesque. Cras sed felis eget velit aliquet. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Arcu non odio euismod lacinia at quis risus sed. Enim tortor at auctor urna. Risus sed vulputate odio ut enim blandit. Netus et malesuada fames ac turpis egestas sed. Orci dapibus ultrices in iaculis nunc. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Duis at consectetur lorem donec massa. Lorem ipsum dolor sit amet consectetur adipiscing elit. Egestas congue quisque egestas diam in arcu cursus. Pulvinar mattis nunc sed blandit libero volutpat. At tempor commodo ullamcorper a lacus vestibulum sed arcu non. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.
+
+Ullamcorper a lacus vestibulum sed arcu non odio. Tortor dignissim convallis aenean et tortor. Faucibus purus in massa tempor nec feugiat nisl. In hendrerit gravida rutrum quisque non tellus. Blandit massa enim nec dui nunc mattis enim ut. Neque sodales ut etiam sit amet nisl purus in mollis. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Metus vulputate eu scelerisque felis imperdiet. Interdum posuere lorem ipsum dolor. Ultrices in iaculis nunc sed augue lacus viverra vitae. Velit euismod in pellentesque massa placerat duis ultricies. Et ultrices neque ornare aenean euismod elementum nisi quis.

package/template-markdown-static-site/src/content/home.md

@@ -0,0 +1,5 @@
+# Welcome to your LWR powered website
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet facilisis magna etiam tempor. Lobortis elementum nibh tellus molestie nunc non blandit massa. In ornare quam viverra orci sagittis eu volutpat odio. Ultricies mi eget mauris pharetra et. Mi tempus imperdiet nulla malesuada pellentesque. Cras sed felis eget velit aliquet. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Arcu non odio euismod lacinia at quis risus sed. Enim tortor at auctor urna. Risus sed vulputate odio ut enim blandit. Netus et malesuada fames ac turpis egestas sed. Orci dapibus ultrices in iaculis nunc. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Duis at consectetur lorem donec massa. Lorem ipsum dolor sit amet consectetur adipiscing elit. Egestas congue quisque egestas diam in arcu cursus. Pulvinar mattis nunc sed blandit libero volutpat. At tempor commodo ullamcorper a lacus vestibulum sed arcu non. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.
+
+Ullamcorper a lacus vestibulum sed arcu non odio. Tortor dignissim convallis aenean et tortor. Faucibus purus in massa tempor nec feugiat nisl. In hendrerit gravida rutrum quisque non tellus. Blandit massa enim nec dui nunc mattis enim ut. Neque sodales ut etiam sit amet nisl purus in mollis. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Metus vulputate eu scelerisque felis imperdiet. Interdum posuere lorem ipsum dolor. Ultrices in iaculis nunc sed augue lacus viverra vitae. Velit euismod in pellentesque massa placerat duis ultricies. Et ultrices neque ornare aenean euismod elementum nisi quis.

package/template-markdown-static-site/src/layouts/main_layout.njk

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+		<title></title>
+        <link rel="stylesheet" href="$assetsDir/css/main.css" />
+	</head>
+
+	<body>
+        <div class="wrapper">
+            <header>
+                <svg class="logo" viewBox="0 0 64 64"><path fill="#00a1e0" d="M23 6h22l-8 18h11L20 58l6-26H16l7-26z"></path><path fill="#032e61" d="M20 60a2 2 0 0 1-1.95-2.45L23.5 34H16a2 2 0 0 1-1.93-2.52l7-26A2 2 0 0 1 23 4h22a2 2 0 0 1 1.83 2.81L40.08 22H48a2 2 0 0 1 1.54 3.27l-28 34A2 2 0 0 1 20 60zm-1.4-30H26a2 2 0 0 1 1.95 2.45l-4.1 17.72L43.76 26H37a2 2 0 0 1-1.83-2.81L41.92 8h-17.4z"></path><path fill="#fff" d="M26 26a2 2 0 0 1-1.93-2.53l3-11a2 2 0 1 1 3.86 1.05l-3 11A2 2 0 0 1 26 26z"></path></svg>
+            </header>
+            <nav>
+                <ul>
+                    <li><a href="/">Home</a>
+                    <li><a href="/about">About</a>
+                     <li><a href="//developer.salesforce.com/docs/platform/lwr/overview">Learn LWR</a>
+                </ul>
+            </nav>
+            <main>
+                {{ body | safe }}
+            </main>
+        </div>
+	</body>
+</html>