├── .editorconfig └── README.md /.editorconfig: -------------------------------------------------------------------------------- 1 | root=true 2 | 3 | [*] 4 | indent_style=space 5 | indent_size=2 6 | end_of_line=lf 7 | charset=utf-8 8 | trim_trailing_whitespace=true 9 | insert_final_newline=true 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ractive.js component file specification 2 | 3 | ## Background 4 | 5 | Complexity introduced in the name of good engineering practices has a real cost in the form of *cognitive burden*. In particular, "separation of concerns" has widely been misunderstood to mean "separation of syntax". It's common seeing developers keep HTML, CSS and JS separate when, in fact, keeping them together is much, _much_ more efficient. Especially under tight deadlines, it's easier to define CSS in the same file as the HTML that uses it, rather than having to hunt down the right file to place it. 6 | 7 | ## Ractive component files 8 | 9 | Remember the good old days? When all CSS went in ` 30 | 31 | 32 | 44 | ``` 45 | 46 | ## Terminology 47 | 48 | - **Loader** - A tool that converts component files either into component constructors or source code. 49 | - **Loader-specific** - A behavior that is not defined by the spec and is open to custom implementation. 50 | - **Top-level** - A position where an element is not nested inside another element. 51 | - **Transform** - The process of converting source code to another form. 52 | 53 | ## Specification 54 | 55 | ### `` 56 | 57 | Top-level `` elements must be treated as component import declarations. 58 | 59 | `href` is a required attribute that defines the location of the import. Paths that start with `./` or `../` must be resolved relative to the current component file. Resolution of paths that do not start with `./` or `../` is loader-specific. 60 | 61 | `name` is an optional attribute that defines the registered name of the component. If present, its value must be used as the imported component's registered name. If absent, the file name of the imported component's file, as defined in `href`, must be used instead. 62 | 63 | Components imported via `` must only be registered to the importing component. It must neither be registered specifically for an instance nor globally. This is equivalent to using the `components` initialization option inside a `Ractive.extend()`. 64 | 65 | ### `