├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .travis.yml
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── demo
├── CNAME
├── component
│ ├── body.css
│ ├── buttons.css
│ ├── click-demo.css
│ └── downloads.css
├── index.html
├── media
│ ├── github.png
│ ├── github@2x.png
│ └── github@3x.png
└── style.css
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
├── CJSSError.js
├── PluginHelpers.js
├── Stage.js
├── cjss.js
├── defaultPlugins.js
├── getProperty.js
├── index.js
├── plugins
├── html.js
├── js.js
└── json.js
├── registerPlugin.js
└── ruleList.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*]
2 | indent_style = space
3 | indent_size = 2
4 |
5 | [*.js]
6 | quote_type = single
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | demo
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb-base",
3 | "parser": "babel-eslint",
4 | "env": {
5 | "browser": true
6 | },
7 | "rules": {
8 | "no-console": "off",
9 | "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
10 | "no-cond-assign": ["error", "except-parens"],
11 | "no-param-reassign": ["error", { "props": false }],
12 | "no-continue": "off",
13 | "no-new-func": "off"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .vscode
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js: node
3 |
4 | script:
5 | - npm run eslint
6 | - npm run build
7 |
8 | deploy:
9 | - provider: pages
10 | skip_cleanup: true
11 | github_token: $GH_KEY # Set in the settings page of your repository as a secure variable
12 | keep_history: true
13 | committer_from_gh: true
14 | local_dir: ./demo
15 | on:
16 | branch: master
17 |
18 | - provider: releases
19 | api_key: $GH_KEY
20 | file:
21 | - "demo/dist/*.js"
22 | skip_cleanup: true
23 | on:
24 | tags: true
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at scott@scottkellum.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Scott Kellum
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CJSS
2 |
3 | ## A CSS based web framework
4 |
5 | **Also, don’t use this project, especially not for anything serious. This is a joke and thought experiment. I won’t help you work through bugs.**
6 |
7 | To install CJSS, add the [JavaScript](https://github.com/scottkellum/CJSS/blob/master/dist/cjss.min.js) to your website.
8 |
9 | ### Development
10 |
11 | - `npm install`: Install the dependencies needed for the project
12 | - `npm run eslint`: Check code quality
13 | - `npm run fix`: Fix certain code issues automatically
14 | - `npm run build`: Compile the output file
15 | - `npm run dev`: Keep compiling the output file
16 |
17 | Your editor probably has [a plugin](https://eslint.org/docs/user-guide/integrations) for automatically linting as you type.
18 |
19 | The demo website can be built by leaving `npm run dev` running, and opening `demo/index.html` in your web browser.
20 |
21 | ## Using CJSS
22 |
23 | First off, everything happens in your CSS file. You can layer this into your websites as you see fit. You can use this to layer on just a little bit more functionality in your CSS here and there or construct an entire page. It’s up to you!
24 |
25 | ### HTML
26 |
27 | To add markup to an element, select it in your CSS file, then use `--body: html(your markup here);` to add your HTML. This markup will appear everywhere that matches your CSS selector and overwrite whatever was there before.
28 |
29 | ```css
30 | h1 {
31 | --body: html(
32 | This is a headline
33 | );
34 | }
35 | ```
36 |
37 | If you wish to pass content through a component, use `${yield}`.
38 |
39 | ```html
40 | My Component
41 | ```
42 |
43 | ```css
44 | component {
45 | --html:(
46 | ${yield}
47 | This is a component
48 | );
49 | }
50 | ```
51 |
52 | This will render as:
53 |
54 | ```html
55 |
56 | My Component
57 | This is a component
58 |
59 | ```
60 |
61 | ### JavaScript
62 |
63 | You can use JavaScript to define the behavior of things right from your HTML. You want something to happen when you click on an element, but don’t want to go into your JS file? Do it right from your CSS file. If you are selecting the `script` element it will assume you are writing a global script, but everywhere else, the keyword `this` will map to the selector you are in.
64 |
65 | ```css
66 | .item {
67 | cursor: pointer;
68 | --script: js(
69 | function toggle() {
70 | this.classList.toggle('active');
71 | }
72 | this.addEventListener('click', toggle );
73 | );
74 | }
75 | ```
76 |
77 | ### Data
78 |
79 | You can add data to your project. This is probably useful for something. Do it using the `--data` attribute. It should be formatted as JSON.
80 |
81 | ```css
82 | nav {
83 | --data: json({
84 | "name": ["one", "two", "three"],
85 | "link": ["#one", "#two", "#three"]
86 | });
87 | --body: html(
88 | ${data.name[0]}
89 | ${data.name[1]}
90 | ${data.name[2]}
91 | );
92 | --script: js(console.log(data));
93 | }
94 | ```
95 |
96 | ## Reference
97 |
98 | ### Users
99 |
100 | There are four stages to each build: `data`, `prepare`, `body` and `element`. The return value is used as the following stage’s data (if anything is returned at all), except for the body stage, when the return value is used as the new child structure of the element.
101 |
102 | Not all stages have to be used, but only one script can exist at each level.
103 |
104 | #### `json`
105 |
106 | JSON: only for the data stage. The code given will be wrapped in curly braces and parsed as JSON without interpolation.
107 |
108 | #### `html`
109 |
110 | This can only be used for the *body* stage. The code given will be treated as a JavaScript template string, so interpolation is possible with ${}.
111 |
112 | You have access to the variables `data` (as set in previous build steps) and `yield` (the HTML code of the contents). Note that this mode will destroy any event listeners previously bound to the children of the element.
113 |
114 | #### `javascript`, `json`
115 |
116 | JavaScript: for any stage. There are two modes: `js` and `js-expr`.
117 |
118 | - `js` evaluates as a block of code, and so return values need the return keyword.
119 | - `js-expr` evaluates as a single expression.
120 |
121 | You always have access to the variable `data` (as set in previous build steps), and during the body stage you also have `yield` (an array of node contents). This means that events and other properties remain bound, unlike in HTML, which goes via innerHTML.
122 |
123 | In the body stage, the return value is used to replace the contents of the element. If the return value is undefined, no changes are made, otherwise the existing contents are removed. If a string is provided, it is parsed as HTML. If a node is returned, it is added directly as the only child. If an array is returned, its elements are recursively added as nodes or text nodes.
124 |
125 | In any other stage, the return value is assigned as `data` for the use of the future build phases. If no object is returned, the value of `data` is not updated.
126 |
127 | ### Plugin developers
128 |
129 | To use this project, either import the root folder (`import * as CJSS from 'cjss'`), or load the minified script in your HTML. Both ways will achieve the same effect: a new object CJSS with the following methods and properties:
130 |
131 | - `CJSS.render()`
132 |
133 | Render all CJSS code in all the linked CSS stylesheets.
134 |
135 | - `CJSS.registerPlugin(modeName, plugin, ...stages)`
136 |
137 | Register a new mode.
138 |
139 | - The mode name is any valid css identifier.
140 | - The plugin is a function of type `(body) => (htmlElement, data) => data`, so it takes the code given to it, and returns a function taking an htmlElement target and the previous data, returning the updated data. If nothing (undefined) is returned, data is not changed.
141 | - The stages (e.g. `CJSS.Stage.DATA`) are used to specify which stages the plugin applies to. If this argument is omitted, this definition of a plugin will be the fallback: it will only be used when no definition specific to the current stage exists.
142 |
143 | Note that it is the responsibility of the plugin to edit the element, especially in the body stage. The function `CJSS.PluginHelpers.assignBody` (see below) should help with this.
144 |
145 | See ./plugins/{html.js, json.js, js.js} for some examples of how to use this function.
146 |
147 | - `CJSS.Stage.{DATA, PREPARE, BODY, SCRIPT}`
148 |
149 | These represent the stages of a build.
150 |
151 | - `CJSS.Error(message, originalError)`
152 |
153 | An error to throw when you encounter an exception while parsing or running the user’s code. The message, original error and the source location will be logged.
154 |
155 | - `CJSS.PluginHelpers.assignBody(element, contents)`
156 |
157 | assigns a string, node or an array of nodes and/or text as the child(ren) of an element, which is useful for the body stage. A single string will be rendered as HTML code, whereas strings in an array will be rendered as text.
158 | };
159 |
160 | ## Examples
161 |
162 | [What to watch carousel by Richard Ekwonye](https://codepen.io/ekwonye/full/QXEzZv)
163 |
164 | [Fork CJSS and play with it yourself on Codepen](https://codepen.io/scottkellum/pen/WqwjLm)
165 |
--------------------------------------------------------------------------------
/demo/CNAME:
--------------------------------------------------------------------------------
1 | cjss.js.org
2 |
--------------------------------------------------------------------------------
/demo/component/body.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
2 |
3 | body {
4 | /* Data */
5 | --data: js-expr({
6 | name: 'world',
7 | });
8 |
9 | /* Markup */
10 | --body: html(
11 |
12 | cjss-group/CJSS
15 |
16 |
17 | Hello ${data.name}!
18 | This page was constructed entirely within CSS files. That includes all the data, markup, scripts, and also styles.
19 |
20 | Click the items below to toggle.
21 | {nav}
22 | Use CJSS in your own project (please don’t!)
23 |
25 | {downloads}
26 |
27 |
29 | {links}
30 |
31 |
32 |
33 |
${data.name[i]}
17 | `).join('')
18 | );
19 |
20 | --script: js(
21 | console.log(this, data)
22 | );
23 | }
24 |
25 | .click-demo > * {
26 | --script: js(
27 | function toggle() {
28 | this.classList.toggle('active');
29 | }
30 |
31 | this.addEventListener('click', toggle);
32 | );
33 | }
34 |
35 | .click-demo > .active {
36 | outline: none;
37 | text-shadow: 0 0 5px white;
38 | box-shadow: 0 0 5px white;
39 | }
--------------------------------------------------------------------------------
/demo/component/downloads.css:
--------------------------------------------------------------------------------
1 | @import url('buttons.css');
2 |
3 | .downloads {
4 | display: flex;
5 | justify-content: center;
6 | --data: js-expr(
7 | JSON.parse(this.dataset.links)
8 | );
9 |
10 | --prepare: js(
11 | this.classList.add('buttons');
12 | );
13 |
14 | --body: js-expr(
15 | data.map(({ title, name, href }) => `
16 |
18 | ${title}${name ? ` (${name})` : ''}
19 |
20 | `).join('')
21 | );
22 | }
23 |
24 | .downloads > * {
25 | --script: js(
26 | function toggle() {
27 | this.classList.toggle('active');
28 | }
29 |
30 | this.addEventListener('click', toggle);
31 | );
32 | }
33 |
34 | .downloads > :hover {
35 | outline: none;
36 | text-shadow: 0 0 5px white;
37 | box-shadow: 0 0 5px white;
38 | }
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CJSS
9 | }} CompiledRule */
12 |
13 | /**
14 | * Prepare one CJSS rule, handling the properties `--html`, `--js` and `--data`.
15 | *
16 | * @param {CSSRule} rule The rule to parse.
17 | * @returns {CompiledRule[]} Zero or one compiled rule, depending on whethere any CJSS code is
18 | * present.
19 | */
20 | function compileRule(rule) {
21 | const selector = rule.style.parentRule.selectorText;
22 |
23 | /** @type {CompiledStage[]} */
24 | const stages = [];
25 | const compiledRule = { selector, stages, processed: new Set() };
26 |
27 | /**
28 | * Create a function for logging a parse error, providing contextual information too.
29 | * @param {string} stage The current build stage.
30 | * @param {string} mode The current build mode.
31 | * @param {string} body The source code being run.
32 | * @returns {ErrorLogger} an error logger that takes an error object and optionally an element.
33 | */
34 | const buildErrorLogger = (stage, mode, body) => (e, element = null) => {
35 | console.error(e.message, e.original);
36 | if (element) console.error(`at selector '${selector}' and element`, element);
37 | else console.error(`at selector '${selector}'`);
38 | console.error(`in script ${stage}: ${mode}(${body})`);
39 | };
40 |
41 | for (const stage of Stage.ordered) {
42 | const property = getProperty(rule, stage)
43 | || (stage.fallback && getProperty(rule, stage.fallback));
44 | if (!property) continue;
45 | const { mode, body } = property;
46 | const logError = buildErrorLogger(stage, mode, body);
47 | try {
48 | stages.push({
49 | logError, selector, run: getPlugin(stage, mode)(body), stage,
50 | });
51 | } catch (e) {
52 | if (e instanceof CJSSError) {
53 | logError(e);
54 | // TODO: in the case of an error, should we skip this element or every element?
55 | break;
56 | } throw e;
57 | }
58 | }
59 |
60 | return stages.length ? [compiledRule] : [];
61 | }
62 |
63 | /**
64 | * Transform an array by replacing each item with zero or more items.
65 | *
66 | * @param {ArrayLike} arrayLike The iterable to start with.
67 | * @param {(x: A) => B} f A function to turn an item into an array.
68 | * @template A, B
69 | */
70 | const flatMap = (arrayLike, f) => [].concat(...Array.from(arrayLike).map(f));
71 |
72 | /**
73 | * Compile all rules in the given stylesheet.
74 | *
75 | * This function recurses when a CSS `@import` declaration is found.
76 | *
77 | * @param {CSSStyleSheet} styleSheet The stylesheet to compile the rules in.
78 | * @returns {CompiledStage[]} The compiled form of all rules, ready to be run.
79 | */
80 | export function compileRules(styleSheet) {
81 | const rules = ruleList(styleSheet);
82 | return flatMap(rules, (rule) => {
83 | if (rule instanceof CSSImportRule) return compileRules(rule.styleSheet);
84 | if (rule instanceof CSSStyleRule) return compileRule(rule);
85 | return [];
86 | });
87 | }
88 |
89 | /**
90 | * Compile all rules in all loaded stylesheets,.
91 | * @returns {CompiledStage[]} The compiled form of all rules, ready to be run.
92 | */
93 | export function compileAllRules() {
94 | return flatMap(document.styleSheets, compileRules);
95 | }
96 |
97 | /**
98 | * Run all the compiled rules, marking each element with the rule number to avoid confusion.
99 | * @param {CompiledRule[]} rules
100 | * @param {number?} limit
101 | * @param {Node} subtree
102 | */
103 | export function runRules(rules, limit = Infinity, subtree = document) {
104 | for (const [i, rule] of rules.entries()) {
105 | if (i > limit) break;
106 | /** @type {Iterable} */
107 | const elements = rule.selector === 'script' ? [null] : subtree.querySelectorAll(rule.selector);
108 |
109 | for (const element of elements) {
110 | rule.processed = rule.processed || new Set();
111 | if (rule.processed.has(element)) continue;
112 | rule.processed.add(element);
113 |
114 | const updatesBody = rule.stages.some(stage => stage.stage === Stage.BODY);
115 |
116 | let data = {};
117 | for (const stage of rule.stages) {
118 | try {
119 | const newData = stage.run(element, data);
120 | if (newData !== undefined) data = newData;
121 | } catch (e) {
122 | if (e instanceof CJSSError) {
123 | stage.logError(e, element);
124 | // TODO: in the case of an error, should we skip this element or every element?
125 | break;
126 | } throw e;
127 | }
128 | }
129 | if (updatesBody) runRules(rules, i, element);
130 | }
131 | }
132 | }
133 |
134 | /**
135 | * Compile and run all rules in all loaded stylesheets.
136 | */
137 | export default function cjss() {
138 | const compiledRules = compileAllRules();
139 | runRules(compiledRules);
140 | }
141 |
--------------------------------------------------------------------------------
/src/defaultPlugins.js:
--------------------------------------------------------------------------------
1 | import './plugins/json';
2 | import './plugins/js';
3 | import './plugins/html';
4 |
--------------------------------------------------------------------------------
/src/getProperty.js:
--------------------------------------------------------------------------------
1 | /** @typedef {{ mode?: string, body: string }} CJSSProperty */
2 |
3 | /**
4 | * Get the value of a rule's CJSS property.
5 | *
6 | * @param {CSSStyleRule} rule The CSS rule from which to extract the property.
7 | * @param {String} propertyName The key to look for, without the leading `--`.
8 | * @returns {CJSSProperty?} The pair of the mode and the body.
9 | */
10 | export default function getProperty(rule, propertyName) {
11 | const raw = rule.style.getPropertyValue(`--${propertyName}`).trim();
12 | if (!raw) return null;
13 | let match;
14 | // an optional JavaScript identifier, followed a body in parentheses.
15 | if ((match = raw.match(/^([-0-9A-Z_$]*)\s*\(([\s\S]*)\)$/i))) {
16 | return { mode: match[1], body: match[2] };
17 | }
18 | // If the parentheses are not found, just return the raw string.
19 | return { body: raw };
20 | }
21 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import cjss from './cjss';
2 | import Stage from './Stage';
3 | import CJSSError from './CJSSError';
4 | import registerPlugin from './registerPlugin';
5 | import * as PluginHelpers from './PluginHelpers';
6 | import './defaultPlugins';
7 |
8 | const documentReady = new Promise((resolve) => {
9 | if (['complete', 'interactive', 'loaded'].includes(document.readyState)) resolve();
10 | else document.addEventListener('DOMContentLoaded', resolve);
11 | }).then(() => document);
12 |
13 | documentReady.then(() => cjss());
14 |
15 | export {
16 | /** `CJSS.render()` runs all the CJSS rewrite rules. */
17 | cjss as render,
18 |
19 | /** Use `CJSS.Stage.{DATA, PREPARE, BODY, SCRIPT}` to specify the scope of the stage. */
20 | Stage,
21 |
22 | /**
23 | * Throw `CJSS.Error(message, originalError)` when you encounter an exception while parsing or
24 | * running the user’s code. The message, original error and the source location will be logged.
25 | */
26 | CJSSError as Error,
27 |
28 | /**
29 | * `CJSS.registerPlugin(modeName, plugin, ...stages)` can be used to register a new mode.
30 | * The mode name is any valid css identifier.
31 | * The plugin is a function of type body => (htmlElement, data) => data, so it takes the code
32 | * given to it, and returns a function taking an htmlElement target and the previous data,
33 | * returning the updated data. If nothing (undefined) is returned, data is not changed.
34 | * The stages (e.g. CJSS.Stage.DATA) are used to specify which stages the plugin applies to.
35 | * If this argument is omitted, this definition of a plugin will be the fallback: it will
36 | * only be used when no definition specific to the current stage exists.
37 | *
38 | * Note that it is the responsibility of the plugin to edit the element, especially in the body
39 | * stage.
40 | *
41 | * See ./plugins/{html.js, json.js, js.js} for some examples of how to use this function.
42 | */
43 | registerPlugin,
44 |
45 | /**
46 | * E.g. `CJSS.PluginHelpers.assignBody(element, contents)`
47 | * assigns a node, text or an array thereof to an element, useful as a return value for the
48 | * body stage.
49 | */
50 | PluginHelpers,
51 | };
52 |
--------------------------------------------------------------------------------
/src/plugins/html.js:
--------------------------------------------------------------------------------
1 | import Stage from '../Stage';
2 | import CJSSError from '../CJSSError';
3 | import registerPlugin from '../registerPlugin';
4 |
5 | /**
6 | * HTML: only for the body stage. The code given will be treated as a
7 | * JavaScript template string, so interpolation is possible with ${}.
8 | *
9 | * You have access to the variables `data` (as set in previous build steps)
10 | * and `yield` (the HTML code for the contents). Note that this will destroy
11 | * any event listeners previously bound to the children.
12 | */
13 | registerPlugin('html', (body) => {
14 | const code = `return \`${body}\``;
15 | try {
16 | const render = new Function('data', 'yield', code);
17 |
18 | return (element, data) => {
19 | try {
20 | element.innerHTML = render.call(element, data, element.innerHTML);
21 | } catch (e) {
22 | throw new CJSSError(`CJSS: ${e.name} in HTML evaluation:`, e);
23 | }
24 | };
25 | } catch (e) {
26 | if (e instanceof SyntaxError) {
27 | throw new CJSSError(`CJSS: ${e.name} in HTML string parsing:`, e);
28 | } throw e;
29 | }
30 | }, Stage.BODY);
31 |
--------------------------------------------------------------------------------
/src/plugins/js.js:
--------------------------------------------------------------------------------
1 | import CJSSError from '../CJSSError';
2 | import { assignBody } from '../PluginHelpers';
3 | import registerPlugin from '../registerPlugin';
4 | import Stage from '../Stage';
5 |
6 | /**
7 | * Prepare a JavaScript plugin, with custom preprocessing and optional input/output of the body.
8 | *
9 | * @param {Boolean} isBody Whether this function is being used to generate the body, and so has
10 | * access to `yield`, and gives the new children as a return value.
11 | * @param {*} jsTransformer How to prepare the given JavaScript snippet for execution
12 | */
13 | const javascriptPlugin = (isBody, jsTransformer = x => x) => (js) => {
14 | try {
15 | const f = new Function('data', isBody ? 'yield' : undefined, jsTransformer(js));
16 |
17 | return (element, data) => {
18 | try {
19 | if (!isBody) return f.call(element, data);
20 | return assignBody(element,
21 | f.call(element, data, [...element.childNodes]));
22 | } catch (e) {
23 | throw new CJSSError(`CJSS: ${e.name} in JS:`, e);
24 | }
25 | };
26 | } catch (e) {
27 | if (e instanceof SyntaxError) {
28 | throw new CJSSError(`CJSS: ${e.name} in JavaScript parsing:`, e);
29 | } throw e;
30 | }
31 | };
32 |
33 | /**
34 | * JavaScript: for any stage. There are three modes: `js` and `js-expr`.
35 | *
36 | * - `js` evaluates as a block of code, and so return values need the return keyword.
37 | * - `js-expr` evaluates as a single expression.
38 | *
39 | * You always have access to the variable `data` (as set in previous build steps), and during the
40 | * body stage you also have `yield` (an array of node contents). This means that events and other
41 | * properties remain bound, unlike in HTML, which goes via innerHTML.
42 | *
43 | * In the body stage, the return value is used to replace the contents of the element. If the
44 | * return value is undefined, no changes are made, otherwise the existing contents are removed. If
45 | * a string is provided, it is parsed as HTML. If a node is returned, it is added directly as the
46 | * only child. If an array is returned, its elements are recursively added as nodes or text nodes.
47 | *
48 | * In any other stage, the return value is assigned as `data` for the use of the future build
49 | * phases. If no object is returned, the value of `data` is not updated.
50 | */
51 | registerPlugin('js', javascriptPlugin(false));
52 | registerPlugin('js', javascriptPlugin(true), Stage.BODY);
53 |
54 | registerPlugin('js-expr', javascriptPlugin(false, js => `return (${js});`));
55 | registerPlugin('js-expr', javascriptPlugin(true, js => `return (${js});`), Stage.BODY);
56 |
--------------------------------------------------------------------------------
/src/plugins/json.js:
--------------------------------------------------------------------------------
1 | import registerPlugin from '../registerPlugin';
2 | import CJSSError from '../CJSSError';
3 | import Stage from '../Stage';
4 |
5 | /**
6 | * JSON: only for the data stage. The code given will be wrapped in curly
7 | * braces and parsed as JSON without interpolation.
8 | */
9 | registerPlugin('json', body => () => {
10 | try {
11 | return JSON.parse(body);
12 | } catch (e) {
13 | if (e instanceof SyntaxError) {
14 | throw new CJSSError(`CJSS: ${e.name} in JSON:`, e);
15 | } throw e;
16 | }
17 | }, Stage.DATA);
18 |
--------------------------------------------------------------------------------
/src/registerPlugin.js:
--------------------------------------------------------------------------------
1 | /** @typedef {import('./Stage').default} Stage */
2 | /** @typedef {(element: HTMLElement, data: any) => any} Renderer */
3 | /** @typedef {(body: String) => Renderer} Compiler */
4 |
5 | /** @typedef {{[stages: Stage]: Compiler} Plugin */
6 |
7 | /** @type {Plugin[]} */
8 | const plugins = [];
9 |
10 | /**
11 | * Add a plugin to CJSS, so that a new syntax can be used for processing the
12 | * CSS.
13 | *
14 | * @param {String} mode The identifier for this plugin’s mode.
15 | * @param {Compiler} method The curried function for compiling and then running
16 | * code in this mode. Firstly the compiler receives the string, so it can be
17 | * compiled once for each element. Secondly, the compiler receives the
18 | * element to apply the code to, as well as the data passed from previous
19 | * steps. You should then return the updated data attribute.
20 | * @param {Stage[]?} includedStages The list of stages that this plugin
21 | * supports. Omit this argument to support all stages. You can overload the
22 | * plugin for multiple stages, and it does not matter whether you set the
23 | * default case first or last.
24 | */
25 | export default function registerPlugin(mode, method, ...includedStages) {
26 | if (!plugins[mode]) plugins[mode] = {};
27 | const plugin = plugins[mode];
28 | const stages = [].concat(...includedStages);
29 | if (stages.length) for (const stage of stages) plugin[stage] = method;
30 | else plugin.fallback = method;
31 | }
32 |
33 | /**
34 | * Fetch the plugin for the given mode and stage.
35 | * @param {Stage} stage The rendering stage we are currently in.
36 | * @param {String} mode The mode to use. If this is omitted, the default for
37 | * the stage is used.
38 | * @returns {Compiler}
39 | */
40 | export function getPlugin(stage, mode) {
41 | const plugin = plugins[mode || stage.defaultMode];
42 | if (!plugin) {
43 | throw new Error(`CJSS: Unknown Plugin ${mode || `${stage.defaultMode} for mode ${mode}`}`);
44 | }
45 | const method = plugin[stage] || plugin.fallback;
46 | if (!method) throw new Error(`CJSS: Plugin ${mode} does not support stage ${stage}.`);
47 | return method;
48 | }
49 |
--------------------------------------------------------------------------------
/src/ruleList.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Get the rule list for a given stylesheet
3 | *
4 | * @param {CSSStyleSheet} styleSheet The stylesheet to get the rules from.
5 | * @returns {CSSRuleList | CSSRule[]} The rules of this stylesheet.
6 | */
7 | export default function ruleList(styleSheet) {
8 | try {
9 | return styleSheet.rules || styleSheet.cssRules || [];
10 | } catch (e) {
11 | if (e.name !== 'SecurityError') throw e;
12 | return [];
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
14 |