CSS bundling support : creates a parallel deps graph just for styles

package.json

@@ -5,37 +5,39 @@
   "author": "Dylan Piercey <dpiercey@ebay.com>",
   "bugs": "https://github.com/marko-js/rollup/issues",
   "dependencies": {
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/pluginutils": "^4.0.0",
+    "@rollup/pluginutils": "^4.1.0",
     "concat-with-sourcemaps": "^1.1.0",
     "mz": "^2.7.0",
-    "tslib": "^2.0.1"
+    "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@commitlint/cli": "^9.1.2",
-    "@commitlint/config-conventional": "^9.1.2",
-    "@types/jest": "^26.0.10",
-    "@types/mz": "2.7.1",
-    "@types/node": "^14.6.0",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@marko/compiler": "5.0.0-next.76",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.1.0",
+    "@types/jest": "^26.0.20",
+    "@types/mz": "2.7.3",
+    "@types/node": "^14.14.21",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
     "coveralls": "^3.1.0",
     "escape-string-regexp": "^4.0.0",
-    "eslint": "^7.7.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-jest": "^23.20.0",
-    "husky": "^4.2.5",
-    "jest": "^26.4.2",
-    "jest-file-snapshot": "^0.3.8",
-    "lint-staged": "^10.2.13",
-    "marko": "^4.18.39",
-    "prettier": "^2.1.0",
-    "rollup": "^1.31.0",
-    "rollup-plugin-postcss": "^3.1.6",
-    "standard-version": "^9.0.0",
-    "ts-jest": "^26.2.0",
-    "typescript": "^4.0.2"
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "husky": "^4.3.8",
+    "jest": "^26.6.3",
+    "jest-file-snapshot": "^0.5.0",
+    "lint-staged": "^10.5.3",
+    "marko": "^5.0.0-next.76",
+    "postcss": "^8.2.4",
+    "prettier": "^2.2.1",
+    "rollup": "^2.36.1",
+    "rollup-plugin-postcss": "^4.0.0",
+    "standard-version": "^9.1.0",
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.1.3"
   },
   "files": [
     "dist"
@@ -52,8 +54,8 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "peerDependencies": {
-    "marko": "^4 || ^5.0.0-next || ^5",
-    "rollup": "^1 || ^2"
+    "@marko/compiler": "^5.0.0-next || ^5",
+    "rollup": "^2"
   },
   "repository": {
     "type": "git",

src/__tests__/fixtures/dom-entry-no-hydrate/__snapshots__/index.css

@@ -0,0 +1,2 @@
+
+  div { color: green }

src/__tests__/fixtures/dom-entry-no-hydrate/__snapshots__/index.js

@@ -0,0 +1,67 @@
+import _marko_createElement from 'marko/dist/runtime/vdom/helpers/v-element';
+import _marko_renderer from 'marko/dist/runtime/components/renderer';
+import { t } from 'marko/dist/runtime/dom';
+import { r } from 'marko/dist/runtime/components/registry-browser';
+import _marko_defineComponent from 'marko/dist/runtime/components/defineComponent';
+import _marko_tag from 'marko/dist/runtime/helpers/render-tag';
+
+const _marko_template = t();
+
+const _marko_node = _marko_createElement("div", {
+  "id": "class"
+}, "0", null, 0, 1);
+
+const _marko_componentType = r("9Hm+P4AG", () => _marko_template),
+      _marko_component = {
+  onMount() {
+    console.log("mounted");
+  }
+
+};
+
+_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+  out.n(_marko_node, component);
+}, {
+  t: _marko_componentType
+}, _marko_component);
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);
+
+const _marko_template$1 = t();
+
+const _marko_componentType$1 = r("hJEYwkTc", () => _marko_template$1),
+      _marko_component$1 = {};
+
+_marko_template$1._ = _marko_renderer(function (input, out, _component, component, state) {
+  out.be("div", {
+    "id": "implicit"
+  }, "0", component, null, 1);
+
+  _marko_tag(_marko_template, {}, out, _component, "1");
+
+  out.ee();
+}, {
+  t: _marko_componentType$1,
+  i: true
+}, _marko_component$1);
+_marko_template$1.Component = _marko_defineComponent(_marko_component$1, _marko_template$1._);
+
+const _marko_template$2 = t();
+
+const _marko_componentType$2 = r("LGZb1o67", () => _marko_template$2),
+      _marko_component$2 = {};
+
+_marko_template$2._ = _marko_renderer(function (input, out, _component, component, state) {
+  out.be("div", {
+    "id": "page"
+  }, "0", component, null, 1);
+
+  _marko_tag(_marko_template$1, {}, out, _component, "1");
+
+  out.ee();
+}, {
+  t: _marko_componentType$2,
+  i: true
+}, _marko_component$2);
+_marko_template$2.Component = _marko_defineComponent(_marko_component$2, _marko_template$2._);
+
+export default _marko_template$2;

src/__tests__/fixtures/entry-no-hydrate/config.ts → src/__tests__/fixtures/dom-entry-no-hydrate/config.ts

@@ -1,6 +1,6 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import marko from "../../../index";
+import marko from "../../../dom-target";
 
 export default {
   input: "src/index.marko",

src/__tests__/fixtures/dom-hydrate-entry-custom-init/__snapshots__/index.css

@@ -0,0 +1,2 @@
+
+  div { color: green }

src/__tests__/fixtures/dom-hydrate-entry-custom-init/__snapshots__/index.js

@@ -0,0 +1,29 @@
+import _marko_createElement from 'marko/dist/runtime/vdom/helpers/v-element';
+import _marko_renderer from 'marko/dist/runtime/components/renderer';
+import { t } from 'marko/dist/runtime/dom';
+import { r } from 'marko/dist/runtime/components/registry-browser';
+import _marko_defineComponent from 'marko/dist/runtime/components/defineComponent';
+import components from 'marko/components';
+
+const _marko_template = t();
+
+const _marko_node = _marko_createElement("div", {
+  "id": "class"
+}, "0", null, 0, 1);
+
+const _marko_componentType = r("evJxYKEN", () => _marko_template),
+      _marko_component = {
+  onMount() {
+    console.log("mounted");
+  }
+
+};
+
+_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+  out.n(_marko_node, component);
+}, {
+  t: _marko_componentType
+}, _marko_component);
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);
+
+components.init("SOME_COMPONENTS");

src/__tests__/fixtures/hydrate-entry-custom-init/config.ts → src/__tests__/fixtures/dom-hydrate-entry-custom-init/config.ts

@@ -1,6 +1,6 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import marko from "../../../index";
+import marko from "../../../dom-target";
 
 export default {
   external: (id: string): boolean => id.startsWith("marko/"),

src/__tests__/fixtures/dom-hydrate-entry-skip-init/__snapshots__/index.css

@@ -0,0 +1,2 @@
+
+  div { color: green }

src/__tests__/fixtures/dom-hydrate-entry-skip-init/__snapshots__/index.js

@@ -0,0 +1,26 @@
+import _marko_createElement from 'marko/dist/runtime/vdom/helpers/v-element';
+import _marko_renderer from 'marko/dist/runtime/components/renderer';
+import { t } from 'marko/dist/runtime/dom';
+import { r } from 'marko/dist/runtime/components/registry-browser';
+import _marko_defineComponent from 'marko/dist/runtime/components/defineComponent';
+
+const _marko_template = t();
+
+const _marko_node = _marko_createElement("div", {
+  "id": "class"
+}, "0", null, 0, 1);
+
+const _marko_componentType = r("8H5FL+bo", () => _marko_template),
+      _marko_component = {
+  onMount() {
+    console.log("mounted");
+  }
+
+};
+
+_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+  out.n(_marko_node, component);
+}, {
+  t: _marko_componentType
+}, _marko_component);
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

src/__tests__/fixtures/hydrate-entry-skip-init/config.ts → src/__tests__/fixtures/dom-hydrate-entry-skip-init/config.ts

@@ -1,6 +1,6 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import marko from "../../../index";
+import marko from "../../../dom-target";
 
 export default {
   external: (id: string): boolean => id.startsWith("marko/"),

src/__tests__/fixtures/dom-hydrate-entry/__snapshots__/index.css

@@ -0,0 +1,2 @@
+
+  div { color: green }

src/__tests__/fixtures/dom-hydrate-entry/__snapshots__/index.js

@@ -0,0 +1,29 @@
+import _marko_createElement from 'marko/dist/runtime/vdom/helpers/v-element';
+import _marko_renderer from 'marko/dist/runtime/components/renderer';
+import { t } from 'marko/dist/runtime/dom';
+import { r } from 'marko/dist/runtime/components/registry-browser';
+import _marko_defineComponent from 'marko/dist/runtime/components/defineComponent';
+import components from 'marko/components';
+
+const _marko_template = t();
+
+const _marko_node = _marko_createElement("div", {
+  "id": "class"
+}, "0", null, 0, 1);
+
+const _marko_componentType = r("tlffmLGE", () => _marko_template),
+      _marko_component = {
+  onMount() {
+    console.log("mounted");
+  }
+
+};
+
+_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+  out.n(_marko_node, component);
+}, {
+  t: _marko_componentType
+}, _marko_component);
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);
+
+components.init();

src/__tests__/fixtures/hydrate-entry/config.ts → src/__tests__/fixtures/dom-hydrate-entry/config.ts

@@ -1,6 +1,6 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import marko from "../../../index";
+import marko from "../../../dom-target";
 
 export default {
   external: (id: string): boolean => id.startsWith("marko/"),

src/__tests__/fixtures/dom-hydrate-split-component/__snapshots__/index.css

@@ -0,0 +1,2 @@
+
+  div { color: green }

src/__tests__/fixtures/dom-hydrate-split-component/__snapshots__/index.js

@@ -0,0 +1,11 @@
+import components from 'marko/components';
+
+var component = {
+  onMount() {
+    console.log("mounted");
+  },
+};
+
+components.register("Oaa9Rkvr", component);
+
+components.init();

src/__tests__/fixtures/hydrate-split-component/config.ts → src/__tests__/fixtures/dom-hydrate-split-component/config.ts

@@ -1,6 +1,6 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import marko from "../../../index";
+import marko from "../../../dom-target";
 
 export default {
   external: (id: string): boolean => id.startsWith("marko/"),

src/__tests__/fixtures/dom-manual-render/__snapshots__/index.css

@@ -0,0 +1,2 @@
+
+  div { color: green }

src/__tests__/fixtures/dom-manual-render/__snapshots__/index.js

@@ -0,0 +1,67 @@
+import _marko_createElement from 'marko/dist/runtime/vdom/helpers/v-element';
+import _marko_renderer from 'marko/dist/runtime/components/renderer';
+import { t } from 'marko/dist/runtime/dom';
+import { r } from 'marko/dist/runtime/components/registry-browser';
+import _marko_defineComponent from 'marko/dist/runtime/components/defineComponent';
+import _marko_tag from 'marko/dist/runtime/helpers/render-tag';
+
+const _marko_template = t();
+
+const _marko_node = _marko_createElement("div", {
+  "id": "class"
+}, "0", null, 0, 1);
+
+const _marko_componentType = r("6WFuaqIY", () => _marko_template),
+      _marko_component = {
+  onMount() {
+    console.log("mounted");
+  }
+
+};
+
+_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {
+  out.n(_marko_node, component);
+}, {
+  t: _marko_componentType
+}, _marko_component);
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);
+
+const _marko_template$1 = t();
+
+const _marko_componentType$1 = r("N2sWa57J", () => _marko_template$1),
+      _marko_component$1 = {};
+
+_marko_template$1._ = _marko_renderer(function (input, out, _component, component, state) {
+  out.be("div", {
+    "id": "implicit"
+  }, "0", component, null, 1);
+
+  _marko_tag(_marko_template, {}, out, _component, "1");
+
+  out.ee();
+}, {
+  t: _marko_componentType$1,
+  i: true
+}, _marko_component$1);
+_marko_template$1.Component = _marko_defineComponent(_marko_component$1, _marko_template$1._);
+
+const _marko_template$2 = t();
+
+const _marko_componentType$2 = r("c+zcLxZ6", () => _marko_template$2),
+      _marko_component$2 = {};
+
+_marko_template$2._ = _marko_renderer(function (input, out, _component, component, state) {
+  out.be("div", {
+    "id": "page"
+  }, "0", component, null, 1);
+
+  _marko_tag(_marko_template$1, {}, out, _component, "1");
+
+  out.ee();
+}, {
+  t: _marko_componentType$2,
+  i: true
+}, _marko_component$2);
+_marko_template$2.Component = _marko_defineComponent(_marko_component$2, _marko_template$2._);
+
+_marko_template$2.render({}).appendTo(document.body);

src/__tests__/fixtures/manual-render/config.ts → src/__tests__/fixtures/dom-manual-render/config.ts

@@ -1,6 +1,6 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import marko from "../../../index";
+import marko from "../../../dom-target";
 
 export default {
   external: (id: string): boolean => id.startsWith("marko/"),