Add more exports and release 0.30.0

CHANGELOG.md

@@ -1,3 +1,36 @@
+## 0.30.0
+
+* Add exports.
+
+  ```js
+  import CSSDoodle from 'css-doodle';
+  import { svg, shape } from 'css-doodle/generator';
+  import { tokenizer } from 'css-doodle/parser';
+
+  document.appendChild(CSSDoodle`
+    @grid: 10 / 200px;
+    background: @p(red, blue);
+    margin: 1px;
+  `);
+
+  let code = svg(`
+    viewBox: 0 0 10 10;
+    circle {
+      cx, cy, r: 5;
+    }
+  `);
+
+  let polygon = shape(`
+    points: 200;
+    r: sin(t);
+  `);
+
+  let tokens = tokenizer.scan(`
+    color: red
+  `);
+  ```
+
+
 ## 0.29.2
 
 * Restore `Plot` function for unitless points.

css-doodle.js

@@ -1,9 +1,9 @@
-/*! css-doodle@0.29.4 */
+/*! css-doodle@0.30.0 */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CSSDoodle = {}));
-})(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.CSSDoodle = factory());
+})(this, (function () { 'use strict';
 
   /**
    * This is totally rewrite for the old parser module
@@ -6102,7 +6102,7 @@ void main() {
     return grid.outerHTML;
   }
 
-  const CSSDoodle = make_tag_function(rules => {
+  var index = make_tag_function(rules => {
     let doodle = document.createElement('css-doodle');
     if (doodle.update) {
       doodle.update(rules);
@@ -6110,19 +6110,6 @@ void main() {
     return doodle;
   });
 
-  const svg = rules => {
-    let result = generate_css(
-      parse$6(`background: @svg(${rules});`),
-      parse_grid('1x1')
-    );
-    let raw = result && result.styles && result.styles.cells || '';
-    let cut = raw.substring(52, raw.length - 5);
-    return decodeURIComponent(cut);
-  };
-
-  exports.CSSDoodle = CSSDoodle;
-  exports.svg = svg;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
+  return index;
 
 }));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-doodle",
-  "version": "0.29.4",
+  "version": "0.30.0",
   "description": "A web component for drawing patterns with CSS",
   "main": "css-doodle.js",
   "scripts": {
@@ -28,9 +28,12 @@
     "src"
   ],
   "exports": {
-    ".": "./css-doodle.js",
-    "./module": {
-      "import": "./src/index.js"
+    ".": "./src/index.js",
+    "./generator": {
+      "import": "./src/exports/generator/index.js"
+    },
+    "./parser": {
+      "import": "./src/exports/parser/index.js"
     }
   },
   "keywords": [

src/exports/generator/index.js

@@ -0,0 +1,7 @@
+import shape from './shape.js';
+import svg from './svg.js';
+
+export {
+  shape,
+  svg,
+}

src/exports/generator/shape.js

@@ -0,0 +1,21 @@
+import parse_shape_commands from '../../parser/parse-shape-commands.js';
+import { shapes, create_shape_points } from '../../generator/shapes.js';
+
+export default function shape(type = '', ...args) {
+  type = String(type).trim();
+  let points = [];
+  if (type.length) {
+    if (typeof shapes[type] === 'function') {
+      points = shapes[type](args);
+    } else {
+      let commands = type;
+      let rest = args.join(',');
+      if (rest.length) {
+        commands = type + ',' + rest;
+      }
+      let config = parse_shape_commands(commands);
+      points = create_shape_points(config, {min: 3, max: 3600});
+    }
+  }
+  return `polygon(${points.join(',')})`;
+}

src/exports/generator/svg.js

@@ -0,0 +1,14 @@
+import { generate_css } from '../../generator/css.js';
+import parse_css from './../../parser/parse-css.js';
+import parse_grid from './../../parser/parse-grid.js';
+import { make_tag_function } from '../../utils/index.js';
+
+export default function svg(rules) {
+  let result = generate_css(
+    parse_css(`background: @svg(${rules});`),
+    parse_grid('1x1')
+  );
+  let raw = result && result.styles && result.styles.cells || '';
+  let cut = raw.substring(52, raw.length - 5);
+  return decodeURIComponent(cut);
+}

src/exports/parser/index.js

@@ -0,0 +1,27 @@
+import parse_compound_value from '../../parser/parse-compound-value.js';
+import parse_css from '../../parser/parse-css.js';
+import parse_direction from '../../parser/parse-direction.js';
+import parse_grid from '../../parser/parse-grid.js';
+import parse_pattern from '../../parser/parse-pattern.js';
+import parse_shaders from '../../parser/parse-shaders.js';
+import parse_shape_commands from '../../parser/parse-shape-commands.js';
+import parse_svg_path from '../../parser/parse-svg-path.js';
+import parse_svg from '../../parser/parse-svg.js';
+import parse_value_group from '../../parser/parse-value-group.js';
+import parse_var from '../../parser/parse-var.js';
+import * as tokenizer from '../../parser/tokenizer.js';
+
+export {
+  parse_compound_value,
+  parse_css,
+  parse_direction,
+  parse_grid,
+  parse_pattern,
+  parse_shaders,
+  parse_shape_commands,
+  parse_svg_path,
+  parse_svg,
+  parse_value_group,
+  parse_var,
+  tokenizer,
+}

src/index.js

@@ -666,25 +666,10 @@ function create_grid(grid_obj) {
   return grid.outerHTML;
 }
 
-const CSSDoodle = make_tag_function(rules => {
+export default make_tag_function(rules => {
   let doodle = document.createElement('css-doodle');
   if (doodle.update) {
     doodle.update(rules);
   }
   return doodle;
 });
-
-const svg = rules => {
-  let result = generate_css(
-    parse_css(`background: @svg(${rules});`),
-    parse_grid('1x1')
-  );
-  let raw = result && result.styles && result.styles.cells || '';
-  let cut = raw.substring(52, raw.length - 5);
-  return decodeURIComponent(cut);
-};
-
-export {
-  CSSDoodle,
-  svg,
-}