1+ <!DOCTYPE html> < html > < head > < meta name ="charset " charset ="utf8 " id ="include_xxm0qoac "> < meta name ="content-type " http-equiv ="Content-Type " content ="text/html; charset=utf-8 " id ="include_xxnd8o0e "> < meta name ="viewport " content ="width=device-width, initial-scale=1 " id ="include_x13l7u56 "> < meta name ="robots " content ="index, follow " id ="include_xxriq75n "> < meta name ="revisit-after " content ="30 days " id ="include_x1m4jm9p "> < link rel ="stylesheet " href ="../build-xxplgqrl.css ">
2+
3+ < script defer ="" src ="../build-xxquecrj.js "> </ script >
4+ </ head > < body > < x-page rootat ="https://modulohtml.org/ ">
5+ < meta charset ="utf8 ">
6+ < title > Artifact - Modulo Documentation</ title >
7+
8+ < div class ="layout Page ">
9+ < nav class ="page-nav Page ">
10+
11+ < a style ="font-size:60px;text-align:center;display:block;font-weight:200 " href ="../ " class ="Page "> ᵐ°dᵘ⁄o</ a >
12+ < ul style ="position: sticky; top: 1px " class ="Page ">
13+ < li class ="toc--outer Page ">
14+ < p > < a style ="font-size: 70% " title ="Download Modulo Docs as a offline-friendly zip " href ="https://codeberg.org/modulo/docs/archive/main.zip " class ="Page ">
15+ ⤓ docs-main.zip</ a >
16+ < tt > v0.1.0</ tt >
17+ </ p >
18+ </ li >
19+
20+
21+ < li class ="toc--outer Page "> < h3 class ="Page "> Modulo</ h3 > </ li >
22+ < li class ="toc-- "> < a href ="../start/index.html " class ="Page "> Introduction</ a > </ li >
23+
24+
25+ < li class ="toc-- "> < a href ="../start/getting-started.html " class ="Page "> Getting Started</ a > </ li >
26+
27+ < li class ="toc--outer Page "> < h3 class ="Page "> Definitions</ h3 > </ li >
28+ < li class ="toc-- "> < a href ="../defs/overview.html " class ="Page "> Overview</ a > </ li >
29+
30+
31+ < li class ="toc-- "> < a href ="../defs/importing.html " class ="Page "> Importing</ a > </ li >
32+
33+
34+ < li class ="toc-- "> < a href ="../defs/definitions.html " class ="Page "> Definition Types</ a > </ li >
35+
36+
37+ < li class ="toc-- "> < a href ="../defs/processors.html " class ="Page "> Processors</ a > </ li >
38+
39+
40+ < li class ="toc-- "> < a href ="../defs/custom.html " class ="Page "> Custom Types</ a > </ li >
41+
42+ < li class ="toc--outer Page "> < h3 class ="Page "> Templating</ h3 > </ li >
43+ < li class ="toc-- "> < a href ="../templating/index.html " class ="Page "> Language Overview</ a > </ li >
44+
45+
46+ < li class ="toc-- "> < a href ="../templating/filters.html " class ="Page "> Template Filters</ a > </ li >
47+
48+
49+ < li class ="toc-- "> < a href ="../templating/tags.html " class ="Page "> Template Tags</ a > </ li >
50+
51+ < li class ="toc--outer Page "> < h3 class ="Page "> Component Parts</ h3 > </ li >
52+ < li class ="toc-- "> < a href ="../parts/props.html " class ="Page "> Props</ a > </ li >
53+
54+
55+ < li class ="toc-- "> < a href ="../parts/script.html " class ="Page "> Script</ a > </ li >
56+
57+
58+ < li class ="toc-- "> < a href ="../parts/state.html " class ="Page "> State</ a > </ li >
59+
60+
61+ < li class ="toc-- "> < a href ="../parts/staticdata.html " class ="Page "> StaticData</ a > </ li >
62+
63+
64+ < li class ="toc-- "> < a href ="../parts/style.html " class ="Page "> Style</ a > </ li >
65+
66+
67+ < li class ="toc-- "> < a href ="../parts/template.html " class ="Page "> Template</ a > </ li >
68+
69+ < li class ="toc--outer Page "> < h3 class ="Page "> Core Definitions</ h3 > </ li >
70+ < li class ="toc--active Page "> < a href ="../core/artifact.html " class ="Page "> Artifact</ a > </ li >
71+
72+
73+ < li class ="toc-- "> < a href ="../core/component.html " class ="Page "> Component</ a > </ li >
74+
75+
76+ < li class ="toc-- "> < a href ="../core/configuration.html " class ="Page "> Configuration</ a > </ li >
77+
78+
79+ < li class ="toc-- "> < a href ="../core/contentlist.html " class ="Page "> ContentList</ a > </ li >
80+
81+
82+ < li class ="toc-- "> < a href ="../core/include.html " class ="Page "> Include</ a > </ li >
83+
84+
85+ < li class ="toc-- "> < a href ="../core/library.html " class ="Page "> Library</ a > </ li >
86+
87+ < li class ="toc--outer Page "> < h3 class ="Page "> Extension</ h3 > </ li >
88+ < li class ="toc-- "> < a href ="../extension/engine.html " class ="Page "> Upgrading Engines</ a > </ li >
89+
90+ </ ul >
91+ </ nav >
92+ < main class ="page-container Page ">
93+
94+
95+
96+ < x-tableofcontents toc ="[{"match":"<h1 id=\"artifact\">Artifact</h1>","level":1,"attrs":"id=\"artifact\"","title":"Artifact","id":"artifact"},{"match":"<h2 id=\"overview\">Overview</h2>","level":2,"attrs":"id=\"overview\"","title":"Overview","id":"overview"},{"match":"<h5 id=\"example1viewingandrunningbuiltincommands\">Example #1: Viewing and running built-in commands</h5>","level":5,"attrs":"id=\"example1viewingandrunningbuiltincommands\"","title":"Example #1: Viewing and running built-in commands","id":"example1viewingandrunningbuiltincommands"},{"match":"<h5 id=\"example2custombuildbundle\">Example #2: Custom Build + Bundle</h5>","level":5,"attrs":"id=\"example2custombuildbundle\"","title":"Example #2: Custom Build + Bundle","id":"example2custombuildbundle"}] " modulo-mount-html =""> < nav class ="regular"=" ">
97+ < div > </ div >
98+ < div >
99+ < div >
100+ < label > [ < input name ="show " type ="checkbox "> Table of Contents ]</ label >
101+ < label title ="Stick to upper right "> [ < span alt ="upper right arrow "> ↗</ span >
102+ < input name ="sticky " type ="checkbox "> ]</ label >
103+ </ div >
104+
105+ < ul >
106+
107+
108+ < li style ="--level: 1 ">
109+ < a href ="#artifact "> Artifact</ a >
110+ </ li >
111+
112+
113+
114+ < li style ="--level: 2 ">
115+ < a href ="#overview "> Overview</ a >
116+ </ li >
117+
118+
119+
120+
121+
122+
123+ </ ul >
124+
125+ </ div >
126+ </ nav > </ x-tableofcontents >
127+
128+ < div class ="markdown-body "> < h1 id ="artifact "> Artifact</ h1 >
129+ < blockquote >
130+ < p > < strong > How Slim Can Modulo.html get?</ strong > Modulo's runtime itself is only about 40kb
131+ after being trimmed for a build. Modulo's built-in artifacts will
132+ automatically "trim" (minify) it's own source code, but make no attempts to
133+ trim other sources.</ p >
134+ </ blockquote >
135+ < p > The < em > Artifact</ em > definition is how you can specify custom build
136+ artifacts. When the build command is run, Modulo loops through all defined
137+ Artifacts and outputs the files they generate. This is how the JS, CSS, and
138+ HTML files get generated whenever you run build by default. For most users,
139+ this is enough--this website uses the default Artifacts, for example. However,
140+ if you want to create custom build outputs for advanced usage in building a
141+ SSG-powered site, then you can use this feature to create as many extra files
142+ per HTML file you SSG as you'd like. For example, you could loop through
143+ images, generating a "thumbnail" page for each one. It's very versatile, and
144+ gives you the full power of the Modulo templating language for JS, CSS, and
145+ prerendered / SSR'ed HTML.</ p >
146+ < p > It manages to be this versatile by functioning as a mini-scripting system
147+ for specifying and configuring builds, allowing for easy addition of
148+ minification, split bundles, or other file types. This gives very fine-grained
149+ control over output in a declarative way.</ p >
150+ < h2 id ="overview "> Overview</ h2 >
151+ < ul >
152+ < li > Simply by registering an Artifact (< code > <Artifact name="css"></ code > , for example), you can begin
153+ to customize or add CSS output</ li >
154+ < li > By adding a < code > remove=</ code > to your Artifact, you can scrub your HTML before saving
155+ the built version, e.g. < code > remove="div.delete-me"</ code > to remove all divs with
156+ < code > delete-me</ code > class.</ li >
157+ < li > By adding a < code > bundle=</ code > to your Artifact, you can specify which elements get
158+ bundled, or disable it with < code > bundle:=false</ code > </ li >
159+ < li > Now you can register things like JavaScript, CSS, or HTML minifiers as
160+ Template filters, and then include them into your build configurations</ li >
161+ < li > Using the Modulo Template syntax allows for extremely precise control over
162+ the exact JavaScript and CSS output.</ li >
163+ </ ul >
164+ < h5 id ="example1viewingandrunningbuiltincommands "> Example #1: Viewing and running built-in commands</ h5 >
165+ < ol >
166+ < li > < p > Step 1: Bring up Dev tools (Right click, inspect, console)</ p > </ li >
167+ < li > < p > Step 2: Do you see < strong > < code > [ᵐ°dᵘ⁄o]</ code > </ strong > logo and a list of management commands? If
168+ there are too many warnings, consider hiding them. Look for a little arrow
169+ between < code > [MAIN THREAD]</ code > and < code > Object { }</ code > . Click on that arrow (and possibly a
170+ < code > <prototype></ code > arrow), to expand the full command menu.</ p > </ li >
171+ < li > < p > Step 3: Click the little arrow next to a command to run it, such as < code > build</ code >
172+ or < code > edit</ code > </ p > </ li >
173+ </ ol >
174+ < h5 id ="example2custombuildbundle "> Example #2: Custom Build + Bundle</ h5 >
175+ < p > Note that in the HTML example, < code > ht</ code > , < code > he</ code > , < code > bo</ code > , and < code > js</ code > tags get swapped with < code > html</ code > ,
176+ < code > head</ code > , < code > body</ code > and < code > script</ code > tags respectively. This prevents various mistakes
177+ in some cases with unsuual syntax and HTML DOM behavior around these special
178+ tags (e.g. closing script tags).</ p > < x-quickdemo mode ="modulo " demo ="modulo_embed " value ="<Artifact name=html prefix="<!DOCTYPE html>" build=mybundle>
179+ <ht lang="en">
180+ <he>
181+ <title>Test Title</title>
182+ <meta charset="utf8" />
183+ <link rel="stylesheet" href="{{ definitions._artifact_css.path }}"></link>
184+ <js defer src="{{ definitions._artifact_js.path }}"></js>
185+ </he>
186+ <bo>
187+ {{ doc.body.innerHTML|minifyhtml|safe }}
188+ </bo>
189+ </ht>
190+ </Artifact>
191+
192+ <Artifact name=css -bundle="modstyle" build=mybundle>
193+ {% for id in def.ids %}
194+ {# Include each Modulo-generated style, with minify filter applied #}
195+ {{ def.data|get:id|minify|safe }}
196+ {% endfor %}
197+ </Artifact>
198+
199+ <Artifact name=js -bundle="modscript" build=mybundle>
200+ {% for id in def.ids %}
201+ {# Include each Modulo-generated script, with minify filter applied #}
202+ {{ def.data|get:id|minify|safe }}
203+ {% endfor %}
204+ {% for name in config.modulo.build.mainmodules %}
205+ {# Call all "main" modules, running Configuration + Component reg #}
206+ modulo.registry.modules.{{ name }}.call(window, modulo);
207+ {% endfor %}
208+ </Artifact>
209+
210+ <script Configuration>
211+ // Very simple minifying functions to scrub whitespace and remove comments
212+ modulo.templateFilter.minify = function (s) {
213+ return s.replace(/\/\*[^\*\!][\s\S]*?\*\/|\/\/.*$/gm, '')
214+ .replace(/[\n \t]+/gm, ' ')
215+ }
216+
217+ modulo.templateFilter.minifyhtml = function (s) {
218+ return s.replace(/<!--.*?-->/gm, ' ')
219+ .replace(/[\n \t]+/gm, ' ')
220+ }
221+ </script>
222+
223+ <Component name=App>
224+ <Template>
225+ <!-- These comments... they should be REMOVED! -->
226+ <button on.click=script.runBuild>
227+ <!-- remove me -->
228+ RUN "mybundle"
229+ </button>
230+ <!-- These comments... they should be REMOVED! -->
231+ </Template>
232+ <Script>
233+ /* COMMENTS should be removed from scripts! */
234+ function runBuild () {
235+ modulo.argv = [ 'mybundle' ] // (set directly)
236+ modulo.command.mybundle(modulo) // (run directly)
237+ }
238+ </Script>
239+ </Component>
240+ modulo-mount-html =""> </ x-quickdemo >
241+ </ div >
242+
243+
244+ </ main >
245+ </ div > </ x-page > </ body > </ html >
0 commit comments