Style and bug fixes.

🔐 NPM security updates
🔄 Bring the setup function inside of register

• This ensures the store is setup with the right provider.
• There was a bug when mutiple copies of the runtime were installed.

🆙 Fix the position of nested data in the equation.

• When editing nested elements would not be in the right position.

🧶 Switch to yarn
🧹 Improve linting.
⬇️ Margin bottom in article quote p
✏️Refactor chart --> svg for library
🐛 Fix when there are no headers or links.

• See #16

🚀 Bump version to 0.2.7

• Botched the publish of the dist folder 🤫

Navigation and Card resizing

New Features

• 🃏Flex-box resizing of cards
• 🚦Navigation improvements to responsiveness
• 🕶Better styles for aside and definition list
• #️⃣Go to Hash function in setup
• 🕶Article and aside spacing

Breaking Changes

• 🔄Rename font css variables

--iooxa-font
--iooxa-font-headers

Major overhaul

New Packages

• Package has been renamed from ink-components to @iooxa/article
• There are a few other packages added:
  • @iooxa/runtime Deals with the reactivity of components
    • https://github.com/iooxa/runtime
  • @iooxa/components Base components hooked up to reactivity
    • https://github.com/iooxa/components
  • @iooxa/svg Diagrams and reactive svg components
    • https://github.com/iooxa/svg
  • @iooxa/article That is this one! Includes all of the above and exposes iooxa in your window

New Features and Major Changes

• Performance improvements - only render the components that actually changed! 🚀
• Execution is now in the main context by default and can access scripts defined there (see #12)
• Opinionated styles are removed (e.g. color, font), and these can be overridden with css vars
• Packages are now in typescript 🎉
• All components are prefixed with r-, rather than the previous ink-
• The bind syntax has changed slightly, see below

New Components

Working with material web components to bring new components!

• <r-switch> - material UI switch
• <r-checkbox> - material UI checkbox
• <r-radio> - material UI radio
• <r-select> - material UI select box #9
• <r-input> - material UI textarea
• <r-visible> - Div that makes things invisible on demand

New Documentation

See https://iooxa.dev for up to date documentation.

Changes to Article - Use more HTML!

• Now using <article>
• Now using <aside> for both asides and callouts. <aside class="callout info">
• These are now just plain CSS - so should be easy for people to re-theme
• <r-equation> no longer suffers from a 1-frame lag
• Outline see #2
• Helper functions to render math inline.

Charting

• Updated the svg library. See https://github.com/iooxa/svg

Runtime State

I have moved to a single redux store to manage the state. This is split up into {variables, components} the low-level interface looks like:

const x = store.dispatch(runtime.actions.createVariable('scope.x', 3));
const max = store.dispatch(runtime.actions.createVariable('scope.max', 9));

const range = store.dispatch(runtime.actions.createComponent(
  'range', 'scope.myRange',
  { value: { func: 'x' }, min: { value: 1 }, max },
  { change: { func: '{x: value}' } },
));

// Can set/get the properties
x.get()
x.set(4)
const { min, max } = range.state;

A version of this will be exposed in the window as iooxa so that you can get/set variables in other programs which is needed for more control: (e.g. see #12 #10).

Creating a new component

I have added a base-class BaseComponent that does the generic registering and unregistering of the component as well as a class wrapper @withRuntime that injects properties that you define in a ComponentSpec and give the relevant setters/getters for properties and events as well as playing nice with lit-element. The basics of this new setup gets the boiler-plate from 74 --> 18 lines of code (~25% of the size). The @withRuntime wrapper I think is also more accessible (to debug etc.) than what I had before.

export const DisplaySpec = {
  name: 'display',
  description: 'Inline display of values',
  properties: {
    value: { type: types.PropTypes.number, default: NaN },
    format: { type: types.PropTypes.string, default: '.1f' },
  },
  events: {},
};

@withRuntime(DisplaySpec)
class Display extends BaseComponent<typeof DisplaySpec> {
  updated(updated: PropertyValues) { onBindChange(updated, this); }

  render() {
    const { value, format } = this.$runtime!.state;
    return html`${formatter(value, format)}`;
  }
}

Other Details

• Packages are now in typescript 🎉
• Packages are now linted (with eslint)!
• Included testing for the store and evaluation scripts
• Move to a redux architecture that can include the evaluate middleware or not. (by default this will be included)
• single file for each component
• Removed boiler-plate code for creating components, including fighting with typescript generics so new components don't have too!!!

---

Breaking Changes

Name/Value/Bind

There were a couple of issues with the previous naming conventions. It was is not specific enough for multiple event types (hover, drag, click, etc.) and there is no option for being able to add named components. This could be very helpful to react to events when a component enters the screen, show the component.min value, etc. The previous name attribute was used to set :value="${name}" and bind="{[name]: value}" which amounted to two way binding in the component. This was a handy shortcut and I think it should stay, however, be renamed to bind now that events are explicitly named.

• name for components will now be used for the actual name of the component (should be unique in that scope)
• introducing named events, which will allow components to have multiple types of events
• bind is used as the default event type on components that allow it.

Previous version:

When you eat <r-dynamic name="cookies" min="2" max="100"> cookies</r-dynamic>,
you consume <r-display :value="cookies * 50" format=".0f"/></r-display> calories.

Changes to:

When you eat <r-dynamic bind="cookies" min="2" max="100"> cookies</r-dynamic>,
you consume <r-display :value="cookies * 50" format=".0f"/></r-display> calories.

This is equivalent to:

When you eat <r-dynamic :value="cookies" :change="{cookies: value}" min="2" max="100"> cookies</r-dynamic>,
you consume <r-display :value="cookies * 50" format=".0f"/></r-display> calories.

Action / Button

The bind syntax doesn't make sense for the r-action and r-button components, it should really be an event and there isn't a value to "bind" to. This should change to :click to return an event transform object. There is also a :hover action!

Transform

• The transform is an evaluated string, and has been renamed to :transform.

Resume

The resume styles/functions have temporarily been removed.

Deprecated Components

• h2-more: please use "float: right" on a button preceding an h2 element
• ink-span: please use r-visible
• ink-p: please use r-visible
• ink-div: please use r-visible
• ink-a: please use r-visible

Ink Anchors

Major

You can now annotate your links to other pages using the ink-a component.

Minor Updates

• Style on ink-card to be aligned left. When embedded in a figure caption, this was centred.
• Contain or cover for ink-card

Chart Updates

Ink Charts

• Rotate text dynamically
• Hide visibility of elements
• Constrain drag nodes

Bug Fixes

• Variable arrays are now better checked
• Range can set width of element

Readme and pointer updates

Getting webcomponents.org to read the correct version of the javascript.

Release https://components.ink

Update links on npm.

Initial release to npm and web-components

Ink is now released on webcomponents.org and on npm.