wallace 0.16.0 → 0.17.1

package/lib/component.js

@@ -1,10 +1,14 @@
 const throwAway = document.createElement("template");
 const NO_LOOKUP = "__";
 
+const defaultSetFunction = function (props, /* #INCLUDE-IF: allowCtrl */ ctrl) {
+  this.props = props;
+  /* #INCLUDE-IF: allowCtrl */ this.ctrl = ctrl;
+};
+
 const ComponentPrototype = {
   render: function (props, /* #INCLUDE-IF: allowCtrl */ ctrl) {
-    this.props = props;
-    /* #INCLUDE-IF: allowCtrl */ this.ctrl = ctrl;
+    this.set(props, /* #INCLUDE-IF: allowCtrl */ ctrl);
     this.update();
   },
 
@@ -57,7 +61,7 @@ const ComponentPrototype = {
         detacher = displayToggle.d;
         if (query !== undefined) {
           lookupTrue = !!lookups[query](props, this);
-          shouldBeVisible = displayToggle.r ? lookupTrue : !lookupTrue;
+          shouldBeVisible = displayToggle.r ? !lookupTrue : lookupTrue;
         }
         if (detacher) {
           detacher.apply(element, shouldBeVisible, elements, stash);
@@ -152,12 +156,14 @@ export const defineComponent = (
   watches,
   queries,
   contructor,
+  setFunction,
   /* #INCLUDE-IF: allowDismount */ dismountKeys,
   inheritFrom
 ) => {
   const ComponentDefinition = initConstructor(contructor, inheritFrom || ComponentBase);
   const proto = ComponentDefinition.prototype;
   throwAway.innerHTML = html;
+  proto.set = setFunction || defaultSetFunction;
   proto._w = watches;
   proto._q = queries;
   proto._t = throwAway.content.firstChild;

package/lib/router.js

@@ -1,5 +1,5 @@
 /*
-The Router is a component which mounts other components based on hash (URL bit after #).
+The Router is a component which mounts other components based on URL hash.
 
 It currently expects the route to be made of chunks separated by / which are either
 text or placeholders:
@@ -24,10 +24,31 @@ export const Router = () => <div></div>;
 
 Object.assign(Router.prototype, {
   render(props, /* #INCLUDE-IF: allowCtrl */ ctrl) {
-    const defaultError = (error, router) => (router.el.innerHTML = error.message);
-    this.error = props.error || defaultError;
+    if (wallaceConfig.flags.allowBase) {
+    } else {
+      throw new Error(
+        "Flag `allowBase` must be set to true in the config for this feature."
+      );
+    }
+    if (wallaceConfig.flags.allowDismount) {
+    } else {
+      throw new Error(
+        "Flag `allowDismount` must be set to true in the config for this feature."
+      );
+    }
+    this._alive = true;
+    this.error =
+      props.error ||
+      (error => {
+        throw error;
+      });
     this.current = null;
-    events.forEach(e => window.addEventListener(e, () => this.onHashChange()));
+    this.handlers = events.map(e => {
+      const handler = () => this.onHashChange();
+      window.addEventListener(e, handler);
+      return { e, handler };
+    });
+
     if (props.atts) {
       Object.keys(props.atts).forEach(k => {
         this.el.setAttribute(k, props.atts[k]);
@@ -49,6 +70,7 @@ Object.assign(Router.prototype, {
             routeData,
             /* #INCLUDE-IF: allowCtrl */ this.ctrl
           );
+          if (!this._alive) return;
           this.current && this.current.cleanup();
           this.mount(component);
           this.current = route;
@@ -56,6 +78,7 @@ Object.assign(Router.prototype, {
         }
         i++;
       }
+      if (!this._alive) return;
       throw new Error(`Router unable to match path "${path}"`);
     } catch (error) {
       this.error(error, this);
@@ -64,6 +87,19 @@ Object.assign(Router.prototype, {
   mount(component) {
     this.el.textContent = "";
     this.el.appendChild(component.el);
+  },
+  /* #INCLUDE-IF: allowDismount */
+  dismount() {
+    this._alive = false;
+    if (this.current) {
+      this.current.cleanup();
+    }
+    this.base.dismount.call(this);
+    if (this._handlers) {
+      this._handlers.forEach(({ e, handler }) => {
+        window.removeEventListener(e, handler);
+      });
+    }
   }
 });
 
@@ -108,10 +144,10 @@ Route.prototype = {
     return this.component;
   },
   /**
-   * Allows user to delete component or perform other cleanup.
+   * Allows user to dismount component or perform other cleanup.
    */
   cleanup() {
-    this._cleanup(this);
+    this._cleanup(this.component);
   }
 };
 

package/lib/types.d.ts

@@ -346,7 +346,6 @@ So long as the rendered component has all its stubs defined somewhere, it will w
 
 Notes:
 
- - Stubs receive the same props and controller as their containing component.
  - Stubs are separate components, so cannot access methods on the containing component
    through `self` (use the controller for that kind of thing).
 
@@ -657,6 +656,7 @@ declare module "wallace" {
     ref: { [key: string]: HTMLElement };
     part: { [key: string]: Part };
     base: Component<Props, Controller>;
+    dismount(): void;
   } & Component<Props, Controller> &
     Methods;
 
@@ -795,24 +795,33 @@ declare module "wallace" {
   export function route<Props>(
     path: string,
     componentDef: ComponentFunction<Props>,
-    converter: RouteConverter<Props>
+    converter?: RouteConverter<Props>,
+    cleanup?: RouteCleanup<Props>
   ): Route<Props>;
 
   type RouteConverter<Props> = (routedata: RouteData) => Props;
-
-  export type Route<Props> = [string, ComponentFunction<Props>, RouteConverter<Props>?];
+  type RouteCleanup<Props> = (component: ComponentInstance<Props>) => void;
+
+  export type Route<Props> = [
+    string,
+    ComponentFunction<Props>,
+    RouteConverter<Props>?,
+    RouteCleanup<Props>?
+  ];
   export type RouterProps = {
-    routes: readonly Route<unknown>[];
-    atts?: Record<string, unknown>;
+    routes: readonly Route<any>[];
+    atts?: Record<string, any>;
     error?: (error: Error, router: Router) => void;
   };
 
-  export class Router extends Component {
-    static nest?({ props }: { props?: RouterProps }): JSX.Element;
+  export type Router = ComponentFunction<RouterProps> & {
     mount(component: Component<any>): void;
-  }
+  };
+
+  export const Router: Router;
 }
 
+type OptionalExpression<T> = T | boolean;
 type MustBeExpression = Exclude<any, string>;
 
 /**
@@ -841,6 +850,37 @@ interface DirectiveAttributes extends AllDomEvents {
    */
   apply?: MustBeExpression;
 
+  /**
+   * ## Wallace directive: assign
+   *
+   * Assigns the component instance to a value during `render`, typically on the props
+   * or the controller.
+   *
+   * You can either use an expression:
+   *
+   * ```
+   * const MyComponent = ({ id }, { ctrl }) => (
+   *   <div assign={ctrl.register[id]}>
+   *   </div>
+   * );
+   * ```
+   *
+   * Or use a qualifier, which is read as being a field on the props:
+   *
+   * ```
+   * const MyComponent = () => (
+   *   <div assign:c>
+   *   </div>
+   * );
+   * ```
+   *
+   * Be careful not to assign to a watched property which updates this component or a
+   * parent, as that will create an infinite loop.
+   *
+   * May only be used on the root element. Modifies the `set` method.
+   */
+  assign?: ComponentInstance;
+
   /**
    * ## Wallace directive: bind
    *
@@ -936,6 +976,50 @@ interface DirectiveAttributes extends AllDomEvents {
    */
   fixed?: string;
 
+  /**
+   * ## Wallace directive: help
+   *
+   * Does nothing other than show this tooltip.
+   *
+   * ### Directives:
+   *
+   * - `apply` runs a callback to modify an element.
+   * - `assign` assigns the component instance to a value.
+   * - `bind` updates a value when an input is changed.
+   * - `class:xyz` defines a set of classes to be toggled.
+   * - `css` shorthand for `fixed:class`.
+   * - `ctrl` specifies ctrl for nested/repeated components.
+   * - `event` changes the event which `bind` reacts to.
+   * - `fixed:xyz` sets a attribute from an expression at definition.
+   * - `hide` sets an element or component's hidden property.
+   * - `html` Set the element's `innnerHTML` property.
+   * - `if` excludes an element from the DOM.
+   * - `key` specifies a key for repeated components.
+   * - `on[EventName]` creates an event handler (note the code is copied).
+   * - `part:xyz` saves a reference to part of a component so it can be updated.
+   * - `props` specifies props for stubs, nested or repeated components.
+   * - `ref:xyz` saves a reference to an element or nested component.
+   * - `show` sets and element or component's hidden property.
+   * - `style:xyz` sets a specific style property.
+   * - `toggle:xyz` toggles `xyz` as defined by `class:xyz` on same element, or class
+   *   `xyz`.
+   * - `unique` can be set on components which are only used once for better performance.
+   * - `watch` watches the props or the controller.
+   *
+   * See more by hovering on a specific directive.
+   * Qualifiers like `class:danger` break the tool tip. Try `class x:danger`.
+   *
+   * ### Nesting syntax:
+   *
+   *   ```
+   *   <MyComponent props={singleProps} />
+   *   <MyComponent.repeat props={arrayOfProps} />
+   *   <MyComponent.repeat props={arrayOfProps} key="id"/>
+   *   <MyComponent.repeat props={arrayOfProps} key={(i) => i.id}/>
+   *   ```
+   */
+  help?: boolean;
+
   /** ## Wallace directive: hide
    *
    * Set the element's `hidden` property and if true, does not render dynamic elements
@@ -1053,14 +1137,57 @@ interface DirectiveAttributes extends AllDomEvents {
    * ## Wallace directive: unique
    *
    * Performance optimisation that can be applied to a component which is only used once.
+   *
+   * May only be used on the root element.
    */
   unique?: boolean;
+
+  /**
+   * ## Wallace directive: watch
+   *
+   * Wraps the props in a `watch` call which updates the component by overriding the
+   * `set` method:
+   *
+   * ```
+   * function set(props, ctrl) {
+   *   this.props = watch(props, () => this.update());
+   *   this.ctrl = ctrl;
+   * }
+   * ```
+   *
+   * You can provide a different callback to `watch`:
+   *
+   * ```
+   * const MyComponent = () => (
+   *   <div watch={(target, key, value) => foo()}></div>
+   * );
+   * ```
+   *
+   * For more complex use cases, import the `watch` function and use it in an overriden
+   * `render` method.
+   *
+   * May only be used on the root element. Modifies the `set` method.
+   */
+  watch?: OptionalExpression<CallableFunction>;
 }
 
 // This makes this a module, which is needed to declare global, which is needed to make
 // LibraryManagedAttributes work.
 export {};
 
+type NativeIntrinsicElements = {
+  [K in keyof HTMLElementTagNameMap]: DirectiveAttributes & {
+    style?: string;
+    class?: string;
+    [attr: string]: any;
+  };
+};
+
+// WARNING - check that your changes here don't break standard html autocomplete
+// in JSX. The following should autocomplete button and allow style:
+//
+// <button style="width:20px" >
+
 declare global {
   namespace JSX {
     // This allows <Foo props={x} if={y} />
@@ -1069,43 +1196,7 @@ declare global {
     type LibraryManagedAttributes<C, P> =
       C extends ComponentFunction<infer Props, any, any, any> ? Wrapper<Props> : P;
 
-    interface IntrinsicElements {
-      /**
-       * Nesting syntax:
-       *   ```
-       *   <MyComponent props={singleProps} />
-       *   <MyComponent.repeat props={arrayOfProps} />
-       *   <MyComponent.repeat props={arrayOfProps} key="id"/>
-       *   <MyComponent.repeat props={arrayOfProps} key={(i) => i.id}/>
-       *   ```
-       *
-       * Available Wallace directives:
-       *
-       * - `apply` runs a callback to modify an element.
-       * - `bind` updates a value when an input is changed.
-       * - `class:xyz` defines a set of classes to be toggled.
-       * - `css` shorthand for `fixed:class`.
-       * - `ctrl` specifies ctrl for nested/repeated components.
-       * - `event` changes the event which `bind` reacts to.
-       * - `fixed:xyz` sets a attribute from an expression at definition.
-       * - `hide` sets an element or component's hidden property.
-       * - `html` Set the element's `innnerHTML` property.
-       * - `if` excludes an element from the DOM.
-       * - `key` specifies a key for repeated components.
-       * - `on[EventName]` creates an event handler (note the code is copied).
-       * - `part:xyz` saves a reference to part of a component so it can be updated.
-       * - `props` specifies props for stubs, nested or repeated components.
-       * - `ref:xyz` saves a reference to an element or nested component.
-       * - `show` sets and element or component's hidden property.
-       * - `style:xyz` sets a specific style property.
-       * - `toggle:xyz` toggles `xyz` as defined by `class:xyz` on same element, or class
-       *   `xyz`.
-       * - `unique` can be set on components which are only used once for better performance.
-       *
-       * You will get more details by hovering on the directive itself, but unfortunetely
-       * the tool tip won't display when you use a qualifier, like `class:danger`. To see
-       * it you cantemporarily change it to something `class x:danger`.
-       */
+    interface IntrinsicElements extends NativeIntrinsicElements {
       [elemName: string]: DirectiveAttributes & Record<string, any>;
     }
     interface Element {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallace",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "author": "Andrew Buchan",
   "description": "An insanely small, fast, intuitive and extendable front-end framework",
   "homepage": "https://wallace.js.org",
@@ -15,8 +15,8 @@
     "test": "jest --clearCache && jest"
   },
   "dependencies": {
-    "babel-plugin-wallace": "^0.16.0",
+    "babel-plugin-wallace": "^0.17.1",
     "browserify": "^17.0.1"
   },
-  "gitHead": "6e98e0eba99aa0acb6842bd4f918c31748ce3a07"
+  "gitHead": "c114de400a01385d31891dd6475d8858e15e70e1"
 }