@es-joy/jsoe 0.0.2 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/.eslintrc.cjs +1 -0
  2. package/CHANGES.md +14 -0
  3. package/demo/index.html +11 -0
  4. package/demo/index.js +30 -0
  5. package/package.json +5 -5
  6. package/src/typeChoices.js +30 -18
package/.eslintrc.cjs CHANGED
@@ -24,6 +24,7 @@ module.exports = {
24
24
  'console',
25
25
  'Date.toISOString',
26
26
  'document.body',
27
+ 'document.createDocumentFragment',
27
28
  'document.querySelector',
28
29
  'document.querySelectorAll',
29
30
  'Error',
package/CHANGES.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # CHANGES TO `@es-joy/jsoe`
2
2
 
3
+ ## 0.1.0
4
+
5
+ - refactor: have `getFormatAndSchemaChoices` return fragment of options
6
+ - refactor: avoid placement dependency for return results of `typeChoices`
7
+ - refactor: return array of return objects for easier direct embedding
8
+ in Jamilih
9
+ - docs: better API docs
10
+ - docs: add demo
11
+ - chore: switch port for testing
12
+
13
+ ## 0.0.2
14
+
15
+ - fix: `node_modules` paths
16
+
3
17
  ## 0.0.1
4
18
 
5
19
  - initial commit
package/demo/index.html ADDED
@@ -0,0 +1,11 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>JSOE Demo</title>
6
+ <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
7
+ <script type="module" src="index.js"></script>
8
+ </head>
9
+ <body>
10
+ </body>
11
+ </html>
package/demo/index.js ADDED
@@ -0,0 +1,30 @@
1
+ import {jml, body} from '../node_modules/jamilih/dist/jml-es-noinnerh.js';
2
+
3
+ import {
4
+ typeChoices, getFormatAndSchemaChoices
5
+ // Types, Formats
6
+ } from '../src/index.js';
7
+
8
+ jml('section', {role: 'main'}, [
9
+ ['h2', [
10
+ 'Key path expected (object required at root)'
11
+ ]],
12
+ ...typeChoices({
13
+ hasKeyPath: true,
14
+ typeNamespace: 'demo-keypath-expected'
15
+ }),
16
+ ['h2', [
17
+ 'No key path expected (type can vary at root)'
18
+ ]],
19
+ ...typeChoices({
20
+ hasKeyPath: false,
21
+ typeNamespace: 'demo-keypath-not-expected'
22
+ }),
23
+ ['h2', [
24
+ 'Format choices without type selection ' +
25
+ '(might use as retrieval return format)'
26
+ ]],
27
+ ['select', [
28
+ getFormatAndSchemaChoices()
29
+ ]]
30
+ ], body);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@es-joy/jsoe",
3
- "version": "0.0.2",
3
+ "version": "0.1.0",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": "./src/index.js"
@@ -80,10 +80,10 @@
80
80
  "scripts": {
81
81
  "eslint": "eslint --ext=js,cjs,md,html .",
82
82
  "lint": "npm run eslint --",
83
- "coverage": "open-cli http://localhost:8086/coverage/lcov-report/",
84
- "open": "open-cli http://localhost:8086/",
85
- "start": "node server 8086",
86
- "start-instrumented": "node server 8086 instrumented",
83
+ "coverage": "open-cli http://localhost:8087/coverage/lcov-report/",
84
+ "open": "open-cli http://localhost:8087/demo/",
85
+ "start": "node server 8087",
86
+ "start-instrumented": "node server 8087 instrumented",
87
87
  "cypress:open": "cypress open",
88
88
  "rollup": "rollup -c",
89
89
  "instrument-add": "nyc instrument src instrumented",
package/src/typeChoices.js CHANGED
@@ -3,13 +3,16 @@ import Formats from './formats.js';
3
3
  import {$e, DOM} from './utils/templateUtils.js';
4
4
 
5
5
  /**
6
+ * Defaults to structured cloning.
6
7
  * @todo Compose from format metadata, so can make user customizable.
7
8
  * @param {object} cfg
8
- * @param {string} cfg.schema
9
- * @param {boolean} cfg.hasKeyPath
10
- * @returns {JamilihArray[]}
9
+ * @param {string} [cfg.schema] (NOT IN USE)
10
+ * @param {boolean} [cfg.hasKeyPath] Whether or not a key path is expected; if
11
+ * true, an indexedDB key is not allowed here as a key does not support
12
+ * the object type which is needed for a key path.
13
+ * @returns {DocumentFragment}
11
14
  */
12
- export const getFormatAndSchemaChoices = ({schema, hasKeyPath}) => {
15
+ export const getFormatAndSchemaChoices = ({schema, hasKeyPath} = {}) => {
13
16
  const hasSchema = typeof schema === 'string';
14
17
  return [
15
18
  ['JSON only', {value: 'json'}],
@@ -44,24 +47,34 @@ export const getFormatAndSchemaChoices = ({schema, hasKeyPath}) => {
44
47
  }]
45
48
  */
46
49
  ].map(([optText, optAtts]) => {
47
- return ['option', optAtts, [optText]];
48
- });
50
+ return jml('option', optAtts, [optText]);
51
+ }).reduce((frag, option) => {
52
+ frag.append(option);
53
+ return frag;
54
+ }, document.createDocumentFragment());
49
55
  };
50
56
 
51
57
  /**
52
58
  * Builds a selector and container for types.
53
59
  * @param {object} cfg
54
- * @param {string} cfg.schema The schema name
55
- * @param {object} cfg.schemaContent The schema content
56
- * @param {boolean} cfg.hasValue If false and `hasKeyPath` is `true`,
57
- * will initialize with an object
58
- * @param {boolean} cfg.singleValue
59
- * @param {boolean} cfg.hasKeyPath
60
- * @param {string} cfg.typeNamespace
61
- * @returns {{
60
+ * @param {string} [cfg.schema] The schema name (NOT IN USE)
61
+ * @param {object} [cfg.schemaContent] The schema content (NOT IN USE)
62
+ * @param {boolean} [cfg.hasValue] Set to `true` if you are supplying
63
+ * your own value. If `false` and `hasKeyPath` is `true`,
64
+ * will initialize with an object.
65
+ * @param {boolean} [cfg.singleValue] (NOT IN USE)
66
+ * @param {boolean} [cfg.hasKeyPath] If this is set (because there is a keyPath
67
+ * to be found within the object) and `hasValue` is true, an object type
68
+ * will be set and required at the root level. This option will also
69
+ * prevent selection of indexedDB key at root (since a key cannot be a
70
+ * plain object).
71
+ * @param {string} [cfg.typeNamespace] Used to prevent conflicts with other
72
+ * instances of typeChoices on the page
73
+ * @returns {[
62
74
  * mainTypeChoices: HTMLSelectElement,
63
75
  * typesHolder: HTMLDivElement
64
- * }} The selector for types and the container for them
76
+ * ]} The selector for types and the container for them. Both should be
77
+ * added to the page.
65
78
  */
66
79
  function typeChoices ({
67
80
  schema,
@@ -81,7 +94,6 @@ function typeChoices ({
81
94
  this.$buildTypeChoices();
82
95
  },
83
96
  $buildTypeChoices () {
84
- const typesHolder = this.nextElementSibling;
85
97
  DOM.removeChildren(typesHolder);
86
98
  jml({'#': Formats.buildTypeChoices({
87
99
  topRoot: $e(typesHolder, 'div[data-type]'),
@@ -98,7 +110,7 @@ function typeChoices ({
98
110
  $on: {change () {
99
111
  this.$buildTypeChoices();
100
112
  }}
101
- }, getFormatAndSchemaChoices({schema, hasKeyPath}));
113
+ }, [getFormatAndSchemaChoices({schema, hasKeyPath})]);
102
114
  const typesHolder = jml('div', {class: 'typesHolder', $custom: {
103
115
  $getTypeRoot () {
104
116
  return $e(this, 'div[data-type]');
@@ -119,7 +131,7 @@ function typeChoices ({
119
131
  schemaContent
120
132
  })}, typesHolder);
121
133
 
122
- return {mainTypeChoices, typesHolder};
134
+ return [mainTypeChoices, typesHolder];
123
135
  }
124
136
 
125
137
  export default typeChoices;