merge upstream & fix dev script

README.md

@@ -25,7 +25,7 @@ novice user, without impeding the expert.
 
 ### iUX Aims and Approach
 
-For the new user, the approach is to reduce complexity and introduce 
+For the new user, the approach is to reduce complexity and introduce
 features gradually, avoid overwhelm, increase retention and ease learning. The approach explored by iUX is to:
 
 - Minimise the amount of information presented at any stage, keeping to what is
@@ -43,7 +43,7 @@ application features and to the corresponding areas in UI.
 
 - Ensure a knowledgable user can get directly to any feature and navigate
 around the UI just as easily as if all the complexity were presented
-at once in a user interface they know very well. 
+at once in a user interface they know very well.
 
 Trying to cater for the novice and expert is particularly ambitious as if the former wasn't enough. So to make life a little easier the focus will be on helping the novice, while keeping catering for the expert in mind as an important longer term goal.
 
@@ -59,14 +59,14 @@ This is the first take on what iUX components may be needed and how they can fit
 - [ ] **IUXRevealArea** - hols a small set of related HTML or general Svelte UI controls
 
 ## iUX Component Summary
-In the hierarchy of application structure and workflow we have the following iUX components. 
+In the hierarchy of application structure and workflow we have the following iUX components.
 
 - IUXContainer
   - IUXTabContainer
     - IUXRevealContainer
       - IUXRevealArea
 
-In this preliminary design, other HTML and Svelte UI components will be children of the **IUXRevealArea**. 
+In this preliminary design, other HTML and Svelte UI components will be children of the **IUXRevealArea**.
 
 The purpose of each of these compnents:
 
@@ -84,8 +84,8 @@ Restrictions on which iUX components can be contained by which other iUX compone
 **iuxContainer** is a container for other iUX controls and can be used to create groups and a hierarchy, which provides the high level structure and flows of the user experience (UX). Provides control over how groups of control, probably always of the same type, are arranged within the container.
 
 ### IUXRevealContainer
-**IUXRevealContainer** is a simple control which can reveal UI controls in an 
-area that was previously blank. Multiple regions can be managed within the overall area managed by this control, intended to be shown or hidden in one or more patterns. Example patterns: 
+**IUXRevealContainer** is a simple control which can reveal UI controls in an
+area that was previously blank. Multiple regions can be managed within the overall area managed by this control, intended to be shown or hidden in one or more patterns. Example patterns:
 - **telescope**, where each reveal extends by showing the next region in the sequence, or hides by reversing the sequence
 - **concertina**, where only one of the areas in the sequence is visible at a time, and the user can easily move forward and backward through the sequence. An option will be to indicate the individual sequences and enable the user to click to reveal one without having to visit the intermediate areas in the sequence.
 
@@ -99,7 +99,7 @@ Options may select different behavious, such as to operate horizontally or verti
 **IUXRevealArea** will I imagine will be necessary to define the areas being managed by an **IUXRevealContainer** component.
 
 ### IUXTabContainer
-**IUXTabContainer** is a component for managing multiple areas of UI, such as a set of **IUXRevealContainers**. 
+**IUXTabContainer** is a component for managing multiple areas of UI, such as a set of **IUXRevealContainers**.
 
 It is similar to a traditional tabbed UI, but instead of *switching* between
 tabs, it *slides* each tabbed area in or out to reveal or hide its UI. This is similar to the resizing mode of **IUXRevealContainer** and might in fact be implemented using common code, but for now it has a separate name. It might anyway be easier for developers to understand if this distinction were to be kept, regardless of how it is implemented.
@@ -121,7 +121,7 @@ can't satisfy the ambtions of iUX as explained below!
 Some UIs reduce complexity and overload by showing only a subset of UI for
 controlling a feature, and revealing more UI controls when the user clicks a
 button such as 'Advanced'. This reveals additional UI, which can be hidden again
-if desired. 
+if desired.
 
 It is this simple idea which iUX builds on, and attempts to bring to an entire
 application. The principle appears in other areas such as toolbars or menus which can be configured for simple or advanced users and so on. But ironically this can add to complexity at the same time, and create problems when an option is hidden from the novice rather than offered at just the point they might be ready to learn about it.
@@ -133,7 +133,7 @@ understood.
 
 #### Wizard Dialog
 Another technique which I think has been around even longer than Advanced/Hide
-is the Wizard Dialog: a sequence of pages with 'Next' and 'Back' buttons. 
+is the Wizard Dialog: a sequence of pages with 'Next' and 'Back' buttons.
 
 A Wizard is useful for configuring a feature or initiating a task with complex
 starting conditions. But a Wizard is also limiting and restrictive so only
@@ -144,7 +144,7 @@ combination, which is an example of the extra yard that iUX is going for.
 #### Progressive Disclosure
 As if by magic after sharing the first version of this vision, someone kindly
 introduced me to the term "progressive disclosure" and a quick search reveals a
-few examples (below). 
+few examples (below).
 
 - Mega Menus
 - Overlays and Popovers

package.json

@@ -2,9 +2,10 @@
   "name": "svelte-iux",
   "version": "0.0.1",
   "description": "WORK IN PROGRESS - nothing to see here!",
-  "main": "src/index.js",
   "svelte": "src/index.js",
   "browser": "src/index.js",
+  "module": "dist/index.mjs",
+  "main": "dist/index.js",
   "keywords": [
     "Svelte",
     "components",
@@ -20,20 +21,22 @@
     "dev": "rollup --config --watch",
     "prepublishOnly": "npm run build",
     "svench": "cross-env SVENCH=1 rollup -cw",
+    "svench:nollup": "cross-env SVENCH=1 nollup --hot --port 42421 --virtual-write public --watch src --watch '.svench/*' --watch node_modules/svench/tmp --watch node_modules/svench/src --config",
     "build:svench": "cross-env SVENCH=1 rollup -c",
     "test": "echo TODO"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^6.0.0",
     "cross-env": "^7.0.2",
-    "mdsvex": "^0.5.1-beta.3",
+    "nollup": "rixo/nollup#next",
     "rehype-add-classes": "^1.0.0",
-    "rollup": "^1.20.0",
-    "rollup-plugin-hot": "^0.0.23",
-    "rollup-plugin-postcss-hot": "^0.0.1",
-    "rollup-plugin-svelte-hot": "^0.7.0",
+    "rollup": "^2.10.9",
+    "rollup-plugin-delete": "^1.2.0",
+    "rollup-plugin-hot": "^0.0.25",
+    "rollup-plugin-postcss-hot": "^0.0.5",
+    "rollup-plugin-svelte-hot": "^0.8.0",
     "svelte": "^3.22.0",
-    "svench": "^0.0.8"
+    "svench": "^0.0.9-9"
   },
   "files": [
     "src",

public/index.html

@@ -8,12 +8,20 @@
 
     <link rel="icon" type="image/png" href="/favicon.png" />
 
+    <!-- Svench's theme -->
     <link rel="stylesheet" href="/svench/svench.css" />
+    <!-- Our theme (from .svench/svench.css) -->
     <link rel="stylesheet" href="/svench/theme.css" />
 
-    <!-- cf https://www.npmjs.com/package/dimport#usage -->
+    <script type="module" src="/svench/svench.js"></script>
+    <!--
+    Replace the previous script with the following for legacy browser support
+    (cf. https://www.npmjs.com/package/dimport#usage)
+
     <script type="module" src="https://unpkg.com/dimport?module" data-main="/svench/svench.js"></script>
     <script type="nomodule" src="https://unpkg.com/dimport/nomodule" data-main="/svench/svench.js"></script>
+    -->
+
   </head>
 
   <body />

rollup.config.js

@@ -1,13 +1,15 @@
 import * as path from 'path'
+import * as fs from 'fs'
 import svelte from 'rollup-plugin-svelte-hot'
 import resolve from '@rollup/plugin-node-resolve'
-import pkg from './package.json'
-import Hmr from 'rollup-plugin-hot'
+import hmr from 'rollup-plugin-hot'
+import del from 'rollup-plugin-delete'
 import postcss from 'rollup-plugin-postcss-hot'
-import { mdsvex } from 'mdsvex'
-import svench from 'svench/rollup'
+import { plugin as svench } from 'svench/rollup'
 import addClasses from 'rehype-add-classes'
 
+import pkg from './package.json'
+
 const name = pkg.name
   .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
   .replace(/^\w/, m => m.toUpperCase())
@@ -18,64 +20,59 @@ const SVENCH = !!process.env.SVENCH
 const HOT = WATCH
 const PRODUCTION = !WATCH
 
-const preprocess = [
-  mdsvex({
-    extension: '.svx',
-    rehypePlugins: [
-      [
-        addClasses,
-        {
-          '*': 'svench-content svench-content-md',
-        },
-      ],
-    ],
-  }),
-]
-
-const hmr =
-  HOT &&
-  Hmr({
-    public: 'public',
-    inMemory: true,
-  })
+let $
 
+// NOTE configs are in function form to avoid instantiating plugins of the
+// config that is not used for nothing (in particular, the HMR plugin launches
+// a dev server on startup, this is not desired when just building for prod)
 const configs = {
-  svench: {
+  svench: () => ({
     input: '.svench/svench.js',
     output: {
       format: 'es',
       dir: 'public/svench',
     },
     plugins: [
+      // NOTE cleaning old builds is required to avoid serving stale static
+      // files from a previous build instead of in-memory files from the dev/hmr
+      // server
+      del({
+        targets: 'public/svench/*',
+        runOnce: true,
+      }),
+
       postcss({
+        hot: HOT,
         extract: path.resolve('public/svench/theme.css'),
         sourceMap: true,
       }),
 
-      svench({
+      ({ $ } = svench({
         // The root dir that Svench will parse and watch.
         dir: 'src',
 
-        // The Svench plugins does some code transform, and so it needs to know of
-        // your preprocessors to be able to parse your local Svelte variant.
-        preprocess,
-
         extensions: ['.svench', '.svench.svelte', '.svench.svx'],
 
         serve: WATCH && {
-          host: '0.0.0.0',
+          host: 'localhost',
           port: 4242,
           public: 'public',
+          nollup: 'localhost:42421',
         },
-      }),
+      })),
 
       svelte({
         dev: !PRODUCTION,
         css: css => {
           css.write('public/svench/svench.css')
         },
         extensions: ['.svelte', '.svench', '.svx'],
-        preprocess,
+        preprocess: {
+          // $.preprocess is Svench's "combined" preprocessor, it wraps both
+          // Mdsvex preprocessors (configured for Svench), and its own
+          // preprocessor (for static analysis -- eg extract source from views)
+          markup: (...args) => $.preprocess(...args),
+        },
         hot: HOT && {
           optimistic: true,
           noPreserveState: false,
@@ -84,11 +81,24 @@ const configs = {
 
       resolve(),
 
-      hmr,
+      HOT &&
+        hmr({
+          public: 'public',
+          inMemory: true,
+          compatModuleHot: !HOT, // for terser
+        }),
     ],
-  },
 
-  lib: {
+    watch: {
+      clearScreen: false,
+      // buildDelay is needed to ensure Svench's code (routes) generator will
+      // pick file changes before Rollup and prevent a double build (if Rollup
+      // first sees a change to src/Foo.svench, then to Svench's routes.js)
+      buildDelay: 100,
+    },
+  }),
+
+  lib: () => ({
     input: 'src/index.js',
     output: [
       { file: pkg.module, format: 'es' },
@@ -103,17 +113,11 @@ const configs = {
           css.write('dist/bundle.css')
         },
         extensions: ['.svelte'],
-        hot: HOT && {
-          optimistic: true,
-          noPreserveState: false,
-        },
       }),
 
       resolve(),
-
-      hmr,
     ],
-  },
+  }),
 }
 
-export default configs[SVENCH ? 'svench' : 'lib']
+export default configs[SVENCH ? 'svench' : 'lib']()

src/a_directory_section.svench/index.svench

@@ -0,0 +1,3 @@
+<h1>Directory section</h1>
+
+<p>Index can be any extension accepted by your Svench config.</p>

src/example/Foo.svelte

@@ -1,10 +1,11 @@
 <script>
   export let red = false
+  export let blue = false
   export let strong = false
   export let hint = '(click me)'
 </script>
 
-<div class:red class:strong on:click>
+<div class:red class:blue class:strong on:click>
   <p>
     <slot>I am component Foo.</slot>
   </p>
@@ -22,6 +23,9 @@
   .red {
     color: red;
   }
+  .blue {
+    color: skyblue;
+  }
   .strong {
     font-weight: bold;
   }

src/example/Foo.svench

@@ -28,5 +28,9 @@
 </View>
 
 <View name="red">
-  <Foo red={true} hint={false} />
+  <Foo red hint={false} />
+</View>
+
+<View name="blue">
+  <Foo blue hint={false} />
 </View>

src/example/component_index.svench

@@ -0,0 +1,7 @@
+<script>
+  import { View } from 'svench'
+</script>
+
+<View name="my view">
+  <p>A view indeed.</p>
+</View>

src/example/component_index.svench.svx

@@ -0,0 +1,27 @@
+<script>
+  import { Render } from 'svench'
+</script>
+
+# Component index
+
+Directories can have index. Svench components can have index too!
+
+~~~
+src/Component.svench
+src/Component.index.svench
+~~~
+
+`.svench.svx` files are automatically associated as index of the sibling `.svench` component with the same name, if it exists:
+
+~~~
+src/Component.svench
+src/Component.svench.svx
+~~~
+
+A component index can render views from its sibling component without specifying the `src`:
+
+~~~svelte
+<Render view="my view" />
+~~~
+
+<Render view="my view" />