This is the entry content.
Hello {{ name }}!
```
--------------------------------
### Enable Lazy Mode for Development
Source: https://github.com/parcel-bundler/website/blob/v2/src/features/development.md
Use the `--lazy` flag to defer file builds until they are requested by the browser. This significantly speeds up initial server startup, especially for large applications.
```shell
parcel 'pages/*.html' --lazy
```
--------------------------------
### Import GLSL Shader with Dependencies
Source: https://github.com/parcel-bundler/website/blob/v2/src/languages/glsl.md
Demonstrates importing a GLSL fragment shader that includes dependencies from other local GLSL files and from node_modules using `#pragma glslify`. This allows for modular shader development and reuse of libraries.
```javascript
import frag from './shader.frag';
// ...
gl.shaderSource(..., frag);
// ...
```
```glsl
// import a function from another file
#pragma glslify: calc_frag_color = require('./lib.glsl')
precision mediump float;
varying vec3 vpos;
void main() {
gl_FragColor = calc_frag_color(vpos);
}
```
```glsl
// import a function from node_modules
#pragma glslify: noise = require('glsl-noise/simplex/3d')
vec4 calc_frag_color(vec3 pos) {
return vec4(vec3(noise(pos * 25.0)), 1.0);
}
// export a function
#pragma glslify: export(calc_frag_color)
```
--------------------------------
### Terminal Build Error Example
Source: https://github.com/parcel-bundler/website/blob/v2/src/home/dx/diagnostics.html
This is an example of a build error shown in the terminal by Parcel. It includes the error message, file path, line number, and a code frame highlighting the issue.
```bash
$ parcel index.html
Server running at http://localhost:1234
🚨 Build failed.
@parcel/core: Cannot resolve 'ract' from './index.js'
/dev/app/index.js:1:19
> 1 | import React from 'ract';
> | ^^^^^^
2 |
3 | function Test() {
@parcel/resolver-default: Cannot find module 'ract'
Did you mean 'react'?
```
--------------------------------
### Importing and Logging with Side Effects
Source: https://github.com/parcel-bundler/website/blob/v2/src/features/scope-hoisting.md
This example demonstrates importing a function and logging its result. It is used in conjunction with `package.json` to illustrate side effect handling.
```javascript
import {add} from 'math';
console.log(add(2, 3));
```
--------------------------------
### Basic Elm App Setup
Source: https://github.com/parcel-bundler/website/blob/v2/src/languages/elm.md
This snippet shows how to set up a basic Elm application that can be imported and run within a Parcel project. It includes the HTML structure, the JavaScript import, and the Elm code for a simple counter.
```html
```
```javascript
import { Elm } from "./Main.elm";
Elm.Main.init({ node: document.getElementById("root") });
```
```elm
module Main exposing (..)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Browser.sandbox { init = init, update = update, view = view }
type alias Model = Int
init :
Model
init =
0
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
```
--------------------------------
### Create a new React Server Components project
Source: https://github.com/parcel-bundler/website/blob/v2/src/blog/v2-14-0/v2-14-0.md
Use the `create-parcel` CLI to scaffold a new project from a template. This command initializes a Git repository, sets up boilerplate files, and installs dependencies.
```bash
npm create parcel react-server my-rsc-app
```
--------------------------------
### BuildStartEvent Type
Source: https://github.com/parcel-bundler/website/blob/v2/api/reporter.html
An event signaling that the Parcel build process has just started.
```javascript
type BuildStartEvent = {|
+type: 'buildStart',
|}
```
--------------------------------
### Add Indexed and VLQ Mappings to SourceMap
Source: https://github.com/parcel-bundler/website/blob/v2/src/plugin-system/source-maps.md
Demonstrates how to create a SourceMap instance and add both indexed and VLQ mappings. Optional line and column offsets can be provided to adjust the generated mappings.
```javascript
import SourceMap from '@parcel/source-map';
let sourcemap = new SourceMap(projectRoot);
// Each function that adds mappings has optional offset arguments.
// These can be used to offset the generated mappings by a certain amount.
let lineOffset = 0;
let columnOffset = 0;
// Add indexed mappings
// These are mappings that can sometimes be extracted from a library even before they get converted into VLQ Mappings
sourcemap.addIndexedMappings(
[
{
generated: {
// line index starts at 1
line: 1,
// column index starts at 0
column: 4,
},
original: {
// line index starts at 1
line: 1,
// column index starts at 0
column: 4,
},
source: "index.js",
// Name is optional
name: "A",
},
],
lineOffset,
columnOffset
);
// Add vlq mappings. This is what would be outputted into a vlq encoded source map
sourcemap.addVLQMap(
{
file: "min.js",
names: ["bar", "baz", "n"],
sources: ["one.js", "two.js"],
sourceRoot: "/the/root",
mappings:
"CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA",
},
lineOffset,
columnOffset
);
```
--------------------------------
### Get All Names
Source: https://github.com/parcel-bundler/website/blob/v2/api/source-map.html
Retrieves a list of all unique names used in the source map.
```javascript
getNames(): Array