create-modulo

<!DOCTYPE html><script src=../static/Modulo.html></script><script type=md>--- title: Script - Component Parts --- # StaticData The _StaticData_ Component Part is useful for loading JSON files to use as a data source. StaticData has no "refresh" capability, meaning this should only consist data that you do not expect to change while running your program, such as type definitions or data from a API that does not change frequently. ### Usage The StaticData Component Part can be used in two different ways. The most common is loading data from a JSON file or JSON API by specifying a `-src=` attribute. During development, this will "fetch" when refreshing the page, but once you "build" the component, the specified content will be "frozen in time" during the build, and bundled in with the resulting JS file with any filtering applied. The other usage is to simply "hardcode" the data in the element itself. As with remote data, it can be in JSON, or other file-formats as described below with the `-data-type=` attribute. ### attrs * `-src` \- Just like any other Component Parts, the `-src=` attribute lets you load the content from another URL. This could be from an API (e.g. something like `-src="https://some.api.com/v1/getdata?p=3"`), or for loading from a file (e.g. `-src="./data/weatherData.json"`), or for loading from a file. If not specified, then the data must be specified within the StaticData tag, or else it will be simply "undefined". * `-data-type` \- This optional attribute should be set to a file-type string (e.g. extension) of a registered converter. By default, the ones that are available are: * *Default:* `-data-type="json"` - This is a strictly JSON syntax (no trailing commas, double quotes only) * `-data-type="js"` - This is a JavaScript syntax JSON object (allows for trailing commas, optional quotes, and even invoking functions to manipulate the data before "freezing" it or bundling it) * `-data-type="csv"` - This is a simple CSV parser, great for importing spreadsheet data as exported from popular spreadsheet apps * `-data-type="txt"` - This is a plain text file. It will be made available as a string in the renderObj. ### renderObj The StaticData Component Part exposes it's data directly (e.g. so it can be accessed in Script, Template, etc). ### Usage Examples Examine the following examples for ideas on how to use StaticData: #### Using an API ```modulo edit: runas=modulo  <Template> {{ staticdata.name }} v{{ staticdata.version }} (by {{ staticdata.author }}) </Template> <StaticData -src="https://raw.githubusercontent.com/modulojs/modulo/main/package.json" ></StaticData> ``` #### Displaying a table with a for loop ```modulo edit: runas=modulo <Template> <h4>uid</h4> <h4>Title</h4> <h4>Body</h4> {% for item in staticdata %} <div>#{{ item.userId }}</div> <div>{{ item.title|truncate:5 }}</div> <div>{{ item.body|truncate:10 }}</div> {% endfor %} </Template>  <StaticData -src="https://jsonplaceholder.typicode.com/posts" ></StaticData> <Style> :host { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 150px; overflow: auto; } </Style> ``` #### Displaying a table from an API ```modulo edit: runas=modulo <Template> {% for category, info in staticdata %} <h4>{{ category }}</h4> <section> <h5>date</h5> <h5>name</h5> <h5>bunt</h5> {% for holiday in info.events %} <div>{{ holiday.date }}</div> <div>{{ holiday.title }}</div> <div>{{ holiday.bunting|yesno:"X,_,?" }}</div> {% endfor %} </section> {% endfor %} </Template> <StaticData -src="https://www.gov.uk/bank-holidays.json" ></StaticData> <Style> section { display: grid; grid-template-columns: 2fr 3fr 1fr; font-size: 0.7rem; height: 80px; overflow-x: auto; } h4, h5 { margin: 0; padding: 0; } </Style> ``` > **Use case: DataViz** - Data visualization is a huge topic. Modulo is not > strictly a data visualization tool: Typically, you'll want to use a > tried-and-true, "off-the-shelf" graphing library, or SVG-based graphics, > which Modulo could work in conjunction with or pass the data into. However, > in either case, "StaticData" and "Template" combined can be used for quick > data visualizations, very useful for assembling dashboards, reports, and many > other types of web projects. ## Usage: Mixing in JavaScript By adding -data-type=js, we can begin to mix in JavaScript in with our `StaticData`. This JavaScript will run at "build time", meaning it will happen before the data is bundled in. This allows you to filter through large data sets and only include the data you want, or provide the attributes you want. For example: ```modulo <script StaticData -src="https://www.gov.uk/bank-holidays.json" -data-type="js" -name="years"> ['england-and-wales'] ['events'] .map(function (ev) { return Number(ev.date.split('-')[0]); // Get year of each date }) /script> ``` Note the alternative `<script StaticData` syntax for defining StaticData. This is not a Script Component Part: It is indeed a StaticData Component Part! However, we can start with `<script ...` just as a convenience, so that editors will recognize it as JavaScript code. Just make sure to include that StaticData as the first attribute, otherwise Modulo will think it's a regular Script, which behaves much differently than StaticData! #### Embedding data with -data-type="js" ```modulo edit:demo=modulo <Template> {% for item in staticdata %} <label> <img src="{{ item.url }}" /> <tt>#{{ item.id }}</tt> {{ item.title|capfirst }} </label> {% endfor %} </Template>  <script StaticData -data-type="js"> [ { id: 1, title: "accusamus beatae ad facilis cum similique qui sunt", url: "./example-data/example_image.jpg" }, { id: 2, title: "reprehenderit est deserunt velit ipsam", url: "./example-data/example_image.jpg" }, ] /script> <Style> :host { display: flex; height: 150px; overflow: auto; } tt { font-size: 2rem; } </Style> ``` #### Filtering with JavaScript ```modulo edit: runas=modulo <Template> <h4>uid</h4> <h4>Title</h4> <h4>Body</h4> {% for item in staticdata %} <div>#{{ item.userId }}</div> <div>{{ item.title|truncate:5 }}</div> <div>{{ item.body|truncate:10 }}</div> {% endfor %} </Template>  <script StaticData -data-type="js" -src="https://jsonplaceholder.typicode.com/posts"> .filter(post => post.userId === 5 ) /script> <Style> :host { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 150px; overflow: auto; } </Style> ``` #### Making a small chart with JavaScript ```modulo edit: runas=modulo <Template> {% for number in month_numbers %} <section style="--month-number: {{ number }};"> <h2 title="Month #{{ number }}">{{ number }}</h2> {% for event in staticdata %} {% if event.month is number %} <article>{{ event.title }}</article> {% endif %} {% endfor %} </section> {% endfor %} </Template> <StaticData -name="month_numbers"> [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ] </StaticData> <script StaticData -src="https://www.gov.uk/bank-holidays.json" -data-type="js"> ['england-and-wales'] ['events'] .map(function (originalEvent) { // Get item 1 when split by dashes, convert to number (gets month) return { month: Number(originalEvent.date.split('-')[1]), title: originalEvent.title, }; }) /script> <Style> :host { height: 200px; display: grid; grid-template-columns: repeat(12, 1fr); } h2 { font-size: 0.9rem; } section { display: flex; flex-direction: column-reverse; } section:hover { background: #aaa; } article { font-size: 0.8rem; grid-column: var(--month-number) / span 1; background: orange; color: white; font-weight: bold; box-sizing: border-box; height: 10px; width: 15px; overflow: hidden; } article:hover { height: 50px; width: 85px; margin-bottom: -40px; margin-right: -70px; z-index: 1; } </Style> ```