feat: add dedicated classes for Props & Slots for easier interaction

edge-js · Nov 15, 2020 · 16fd508 · 16fd508
1 parent e228e0f
commit 16fd508
Show file tree

Hide file tree

Showing 28 changed files with 582 additions and 40 deletions.
diff --git a/example/index.ts b/example/index.ts
@@ -1,4 +1,4 @@
-import edge from '..'
+import edge from '../index'
 import { join } from 'path'
 import { createServer } from 'http'
 
@@ -32,7 +32,6 @@ class User extends Base {
 
 const user = new User()
 user.parent = user
-console.log(user)
 
 createServer((_req, res) => {
 	res.writeHead(200, { 'content-type': 'text/html' })

diff --git a/example/views/partials/button.edge b/example/views/partials/button.edge
@@ -0,0 +1 @@
+<button>delete</button>
diff --git a/example/views/welcome.edge b/example/views/welcome.edge
@@ -5,14 +5,16 @@
   <title></title>
 </head>
 <body>
-  {{ inspect(state.user) }}
-  @component('components.modal', title = 'Card', age = 22)
+	{{ inspect(state.user) }}
+	@set('time', 'afternoon')
+
+  @component('components/modal', title = 'Card', age = 22)
     @slot('body')
       <p>hello</p>
     @endslot
 
     @slot('actions')
-      <button>delete</button>
+      @include('partials/button')
     @endslot
   @endcomponent
 </body>

diff --git a/fixtures/components-advanced-props/button.edge b/fixtures/components-advanced-props/button.edge
@@ -0,0 +1,3 @@
+<button type="submit"{{ $props.serializeExcept(['type', 'title']) }}>
+  {{ title }}
+</button>
diff --git a/fixtures/components-advanced-props/compiled.js b/fixtures/components-advanced-props/compiled.js
@@ -0,0 +1,9 @@
+let out = "";
+let $lineNumber = 1;
+let $filename = "{{__dirname}}index.edge";
+try {
+out += template.renderWithState("components-advanced-props/button", { class: 'mb-4 px-4', id: 'foo-bar', title: 'Click me' }, { main: function () { return "" } }, { filename: $filename, lineNumber: $lineNumber });
+} catch (error) {
+ctx.reThrow(error, $filename, $lineNumber);
+}
+return out;
diff --git a/fixtures/components-advanced-props/index.edge b/fixtures/components-advanced-props/index.edge
@@ -0,0 +1,5 @@
+@!component("components-advanced-props/button", {
+  class: 'mb-4 px-4',
+  id: 'foo-bar',
+  title: 'Click me'
+})
diff --git a/fixtures/components-advanced-props/index.json b/fixtures/components-advanced-props/index.json
@@ -0,0 +1 @@
+{}
diff --git a/fixtures/components-advanced-props/index.txt b/fixtures/components-advanced-props/index.txt
@@ -0,0 +1,3 @@
+<button type="submit" class="mb-4 px-4" id="foo-bar">
+  Click me
+</button>
diff --git a/fixtures/components-isolated-state/compiled.js b/fixtures/components-isolated-state/compiled.js
@@ -2,7 +2,7 @@ let out = "";
 let $lineNumber = 1;
 let $filename = "{{__dirname}}index.edge";
 try {
-out += template.renderWithState("components-isolated-state/alert", {}, { main: function () { return "" } });
+out += template.renderWithState("components-isolated-state/alert", {}, { main: function () { return "" } }, { filename: $filename, lineNumber: $lineNumber });
 } catch (error) {
 ctx.reThrow(error, $filename, $lineNumber);
 }

diff --git a/fixtures/components-named-slots/compiled.js b/fixtures/components-named-slots/compiled.js
@@ -26,7 +26,7 @@ slot_1 += "    This is title";
 ctx.reThrow(error, $filename, $lineNumber);
 }
 return slot_1;
-} });
+} }, { filename: $filename, lineNumber: $lineNumber });
 } catch (error) {
 ctx.reThrow(error, $filename, $lineNumber);
 }

diff --git a/fixtures/components-partials/compiled.js b/fixtures/components-partials/compiled.js
@@ -12,7 +12,7 @@ slot_main += `${ctx.escape(state.username || "Guest")}`;
 ctx.reThrow(error, $filename, $lineNumber);
 }
 return slot_main;
-} });
+} }, { filename: $filename, lineNumber: $lineNumber });
 } catch (error) {
 ctx.reThrow(error, $filename, $lineNumber);
 }

diff --git a/fixtures/components-props/compiled.js b/fixtures/components-props/compiled.js
@@ -10,7 +10,7 @@ slot_main += "Hello world";
 ctx.reThrow(error, $filename, $lineNumber);
 }
 return slot_main;
-} });
+} }, { filename: $filename, lineNumber: $lineNumber });
 } catch (error) {
 ctx.reThrow(error, $filename, $lineNumber);
 }

diff --git a/fixtures/components-slot-props/compiled.js b/fixtures/components-slot-props/compiled.js
@@ -16,7 +16,7 @@ slot_1 += `${ctx.escape(state.username)}`;
 ctx.reThrow(error, $filename, $lineNumber);
 }
 return slot_1;
-} });
+} }, { filename: $filename, lineNumber: $lineNumber });
 } catch (error) {
 ctx.reThrow(error, $filename, $lineNumber);
 }

diff --git a/fixtures/components-slots-partials/compiled.js b/fixtures/components-slots-partials/compiled.js
@@ -11,7 +11,7 @@ slot_main += template.renderInline("components-slots-partials/partial")(template
 ctx.reThrow(error, $filename, $lineNumber);
 }
 return slot_main;
-} });
+} }, { filename: $filename, lineNumber: $lineNumber });
 } catch (error) {
 ctx.reThrow(error, $filename, $lineNumber);
 }

diff --git a/fixtures/components-state/compiled.js b/fixtures/components-state/compiled.js
@@ -12,7 +12,7 @@ slot_main += `${ctx.escape(state.username)}`;
 ctx.reThrow(error, $filename, $lineNumber);
 }
 return slot_main;
-} });
+} }, { filename: $filename, lineNumber: $lineNumber });
 } catch (error) {
 ctx.reThrow(error, $filename, $lineNumber);
 }

diff --git a/fixtures/components/compiled.js b/fixtures/components/compiled.js
@@ -10,7 +10,7 @@ slot_main += "  Hello world";
 ctx.reThrow(error, $filename, $lineNumber);
 }
 return slot_main;
-} });
+} }, { filename: $filename, lineNumber: $lineNumber });
 } catch (error) {
 ctx.reThrow(error, $filename, $lineNumber);
 }

diff --git a/fixtures/nested-components/compiled.js b/fixtures/nested-components/compiled.js
@@ -10,7 +10,7 @@ slot_main += "  Hello world";
 ctx.reThrow(error, $filename, $lineNumber);
 }
 return slot_main;
-} });
+} }, { filename: $filename, lineNumber: $lineNumber });
 } catch (error) {
 ctx.reThrow(error, $filename, $lineNumber);
 }

diff --git a/npm-audit.html b/npm-audit.html
@@ -47,15 +47,15 @@ <h5 class="card-title">
                 <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">
-                            13
+                            25
                         </h5>
                         <p class="card-text">Dependencies</p>
                     </div>
                 </div>
                 <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">
-                            November 15th 2020, 8:11:25 am
+                            November 15th 2020, 12:16:39 pm
                         </h5>
                         <p class="card-text">Last updated</p>
                     </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
   },
   "dependencies": {
     "@poppinss/inspect": "^1.0.1",
+    "@poppinss/utils": "^2.5.7",
     "edge-error": "^1.0.5",
     "edge-lexer": "^3.2.0",
     "edge-parser": "^5.3.0",
@@ -80,6 +81,7 @@
     "lodash.merge": "^4.6.2",
     "lodash.size": "^4.2.0",
     "macroable": "^5.0.3",
+    "stringify-attributes": "^2.0.0",
     "truncatise": "0.0.8"
   },
   "husky": {

diff --git a/src/Component/Props.ts b/src/Component/Props.ts
@@ -0,0 +1,96 @@
+/*
+ * edge
+ *
+ * (c) Harminder Virk <virk@adonisjs.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { EdgeError } from 'edge-error'
+import { lodash } from '@poppinss/utils'
+import stringifyAttributes from 'stringify-attributes'
+import { safeValue } from '../Context'
+
+/**
+ * Class to ease interactions with component props
+ */
+export class Props {
+	constructor(options: {
+		component: string
+		state: any
+		caller: { filename: string; lineNumber: number }
+	}) {
+		this[Symbol.for('options')] = options
+		Object.assign(this, options.state)
+	}
+
+	/**
+	 * Find if a key exists inside the props
+	 */
+	public has(key: string) {
+		const value = lodash.get(this[Symbol.for('options')].state, key)
+		return value !== undefined && value !== null
+	}
+
+	/**
+	 * Returns the value of a key from the props. An exception is raised
+	 * if value is undefined or null.
+	 */
+	public get(key: string, defaultValue?: any) {
+		const value = lodash.get(this[Symbol.for('options')].state, key, defaultValue)
+		if (value === undefined || value === null) {
+			throw new EdgeError(
+				`"${key}" prop is required in order to render the "${
+					this[Symbol.for('options')].component
+				}" component`,
+				'E_MISSING_PROP',
+				{
+					filename: this[Symbol.for('options')].caller.filename,
+					line: this[Symbol.for('options')].caller.lineNumber,
+					col: 0,
+				}
+			)
+		}
+
+		return value
+	}
+
+	/**
+	 * Return only given keys
+	 */
+	public only(keys: string[]) {
+		return lodash.pick(this[Symbol.for('options')].state, keys)
+	}
+
+	/**
+	 * Return except the mentioned keys
+	 */
+	public except(keys: string[]) {
+		return lodash.omit(this[Symbol.for('options')].state, keys)
+	}
+
+	/**
+	 * Serializes props to attributes
+	 */
+	public serialize(mergeProps?: any) {
+		const props = this[Symbol.for('options')].state
+		return safeValue(stringifyAttributes(lodash.merge({}, props, mergeProps)))
+	}
+
+	/**
+	 * Serializes only the given props
+	 */
+	public serializeOnly(keys: string[], mergeProps?: any) {
+		const props = this.only(keys)
+		return safeValue(stringifyAttributes(lodash.merge({}, props, mergeProps)))
+	}
+
+	/**
+	 * Serialize all props except the given keys
+	 */
+	public serializeExcept(keys: string[], mergeProps?: any) {
+		const props = this.except(keys)
+		return safeValue(stringifyAttributes(lodash.merge({}, props, mergeProps)))
+	}
+}