1 | # `marko.json` & `marko-tag.json`
|
2 |
|
3 | Marko supports configuration files for validation, enabling experimental features, and custom paths for component files.
|
4 |
|
5 | These configuration files are automatically found with [the same discovery mechanism as custom tags](./custom-tags.md#how-tags-are-discovered).
|
6 |
|
7 | There are 2 types of configuration files:
|
8 |
|
9 | 1. `marko.json` describes an entire suite of components.
|
10 | 2. `marko-tag.json` describes a single component.
|
11 |
|
12 | ## Single component definition
|
13 |
|
14 | `marko-tag.json` configures a single component. It’s automatically discovered if placed inside a [tag directory](./custom-tags.md#tag-directories).
|
15 |
|
16 | ### Options
|
17 |
|
18 | ```js
|
19 | {
|
20 | "html": true, // Treat as a native HTML tag, not a custom tag.
|
21 | "htmlType": "svg", // Optimizes for specific types of native tags (currently only `svg` and `html`).
|
22 | "open-tag-only": true, // Forbids passing body content to this tag.
|
23 | "featureFlags": [ "feature-a" ], // Enable beta features by passing feature flags.
|
24 | "nested-tags": { // This section configures attribute tags.
|
25 | "tab": {
|
26 | "target-property": "tabs", // Puts `<@tab>` tags into `input.tabs`.
|
27 | "is-repeated": true, // Allow more than one nested `<@tab>`.
|
28 | "attributes": {
|
29 | // Same as the “Attributes” section below.
|
30 | }
|
31 | }
|
32 | }
|
33 | }
|
34 | ```
|
35 |
|
36 | ### Attributes
|
37 |
|
38 | One commonly-used feature of this config file is compile-time checks for attributes.
|
39 |
|
40 | ```js
|
41 | {
|
42 | "attributes": {
|
43 | "heading": "string"
|
44 | }
|
45 | }
|
46 | ```
|
47 |
|
48 | The above code ensures that the `heading` attribute is the _only_ attribute supplied to this tag.
|
49 |
|
50 | The `string` value is used as documentation for the custom tag. It may be picked up by tooling, like Marko’s editor plugins, to provide hints to the user.
|
51 |
|
52 | The recommended list of attribute types are as follows:
|
53 |
|
54 | - `expression` (any JavaScript expression)
|
55 | - `string`
|
56 | - `number`
|
57 | - `boolean`
|
58 | - `regexp`
|
59 | - `date`
|
60 | - `object`
|
61 | - `array`
|
62 | - `function`
|
63 |
|
64 | You can also provide an object for an attribute definition’s value for additional options:
|
65 |
|
66 | ```js
|
67 | {
|
68 | "attributes": {
|
69 | "heading": {
|
70 | "type": "string", // Same as setting "string" above.
|
71 | "default-value": 0, // The attribute will default to this value.
|
72 | "required": true, // Error during compilation if this attribute is undefined. (Mutually exclusive with "default-value"
|
73 | "preserve-name": true, // By default component attributes are camelCased; this disables that feature.
|
74 | "remove-dashes": true, // By default native tag attributes are dash-cased; this disables that feature.
|
75 |
|
76 | // The following attributes do nothing, but are picked up by tooling.
|
77 | "deprecated": true,
|
78 | "description": "The component’s heading text" // Describes the attribute’s purpose.
|
79 | }
|
80 | }
|
81 | }
|
82 | ```
|
83 |
|
84 | We can also describe a _pattern_ of attributes to match a definition:
|
85 |
|
86 | ```js
|
87 | {
|
88 | "attributes": {
|
89 | "data-*": "string"
|
90 | }
|
91 | }
|
92 | ```
|
93 |
|
94 | In the above, all attributes prefixed with `data-` are configured to be a `string`.
|
95 |
|
96 | > **Note:** Future Marko versions will describe these definitions/types in the component itself, reducing the need for this configuration file.
|
97 |
|
98 | ### Paths
|
99 |
|
100 | There are several options that override the default discovery of component files, such as the template.
|
101 |
|
102 | Typically, you should let Marko find these files automatically, but here is a reference in case you encounter these settings in the wild.
|
103 |
|
104 | ```javascript
|
105 | {
|
106 | "template": "./template.marko", // Custom path to the `.marko` template.
|
107 | "renderer": "./renderer.js", // Custom path to the `renderer.js` file.
|
108 |
|
109 | // Compiler file hooks
|
110 | "migrator": "./migrator.js", // Hooks into the migration stage for migrating deprecated features.
|
111 | "node-factory": "./node-factory.js", // Hooks into the parsing stage; should return a valid Marko AST.
|
112 | "transformer": "./transformer.js", // Used to modify the AST before generating it.
|
113 | "code-generator": "./code-generator.js" // Used to generate custom JS.
|
114 | }
|
115 | ```
|
116 |
|
117 | > **⚠️ Note:** Compiler hooks are currently undocumented: avoid using them. The compiler API is overhauled in Marko 5, and will be documented once that transition is complete.
|
118 |
|
119 | ## Tag library definition
|
120 |
|
121 | Along with configuring a single component, you can use a `marko.json` file to configure an _entire library of components_.
|
122 |
|
123 | Similar to [`marko-tag.json`](#single-component-definition), this file is discovered if placed within a [tag directory](./custom-tags.md#tag-directories). It will also be discovered at the root directory of a project, or [in a `node_module` package](./custom-tags.md#publishing-tags-to-npm).
|
124 |
|
125 | ### Options
|
126 |
|
127 | ```js
|
128 | {
|
129 | "taglib-id": "my-custom-tag-library", // Names the component library, for better errors.
|
130 | "tags-dir": "./ui-modules", // What directory to crawl to autodiscover components. Default:`./components/`
|
131 | "taglib-imports": ["./some-folder/marko.json", "./other-folder/marko.json"], // Creates a _combined_ tag library by referencing others.
|
132 |
|
133 | "tags": { // Definitions for individial tags.
|
134 | "my-tag": {
|
135 | // Same options as “marko-tag.json”.
|
136 | }
|
137 | },
|
138 |
|
139 | "attributes": {
|
140 | // Defines attributes on all tags.
|
141 | // Options are the same as the “attributes” section in “marko-tag.json”.
|
142 | },
|
143 |
|
144 | // Compiler file hooks (run on all templates)
|
145 | "migrator": "./migrator.js", // Hooks into the migration stage for migrating deprecated features.
|
146 | "transformer": "./transformer.js", // Used to modify the AST before generating it.
|
147 | "text-transformer": "./text-transformer.js", // Used to transform all static text in the template.
|
148 | }
|
149 | ```
|
150 |
|
151 | > **⚠️ Note:** Compiler hooks are currently undocumented: avoid using them. The compiler API is overhauled in Marko 5, and will be documented once that transition is complete.
|
152 |
|
153 | ## Shorthands
|
154 |
|
155 | Both configuration files support _shorthands_ for defining `tags` and `attributes`. For example, take this `marko.json` file:
|
156 |
|
157 | _marko.json_
|
158 |
|
159 | ```js
|
160 | {
|
161 | "taglib-id": "my-custom-tag-library",
|
162 | "tags": {
|
163 | "my-layout": {
|
164 | "attributes": {
|
165 | "name": "string",
|
166 | "age": "number"
|
167 | },
|
168 | "nested-tags": {
|
169 | "heading": {
|
170 | "attributes": {
|
171 | "color": "string"
|
172 | }
|
173 | },
|
174 | "body": {
|
175 | "attributes": {
|
176 | "color": "string"
|
177 | }
|
178 | }
|
179 | }
|
180 | }
|
181 | }
|
182 | }
|
183 | ```
|
184 |
|
185 | As a shorthand, anywhere `tags` or `nested-tags` is used, you can remove the outer object and wrap the individual tags in `<angle-brackets>`.
|
186 |
|
187 | For `attributes`, you can remove the outer object and prefix the attributes with an `@`.
|
188 |
|
189 | The above example using the shorthand syntax would become:
|
190 |
|
191 | _marko.json_
|
192 |
|
193 | ```js
|
194 | {
|
195 | "taglib-id": "my-custom-tag-library",
|
196 | "<my-layout>": {
|
197 | "@name": "string",
|
198 | "@age": "number",
|
199 | "<heading>": {
|
200 | "@color": "string"
|
201 | },
|
202 | "<body>": {
|
203 | "@color": "string"
|
204 | }
|
205 | }
|
206 | }
|
207 | ```
|
208 |
|
209 | For `nested-tags`, there is also a shorthand for `is-repeated` (a postfix of `[]`) and `target-property` (a prefix of `@newName`):
|
210 |
|
211 | _marko.json_
|
212 |
|
213 | ```javascript
|
214 | {
|
215 | "<my-layout>": {
|
216 | "@sections <section>[]": {
|
217 | "@color": "string"
|
218 | }
|
219 | }
|
220 | }
|
221 | ```
|
222 |
|
223 | Is equivalent to:
|
224 |
|
225 | _marko.json_
|
226 |
|
227 | ```javascript
|
228 | {
|
229 | "tags": {
|
230 | "my-layout": {
|
231 | "nested-tags": {
|
232 | "section": {
|
233 | "target-property": "sections",
|
234 | "is-repeated": true,
|
235 | "attributes": {
|
236 | "color": "string"
|
237 | }
|
238 | }
|
239 | }
|
240 | }
|
241 | }
|
242 | }
|
243 | ```
|