@kirana-style/ember 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,28 @@
-# Temporary Holding Version
+# @kirana-style/ember
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Kirana for Ember on Embroider and Vite (D-072): `css()` in `.gjs` and `.gts` files, and `sx` to merge
+handles in templates.
+
+```js
+// vite.config.mjs — Kirana last, after Embroider's plugins
+plugins: [
+  classicEmberSupport(),
+  ember(),
+  babel({ babelHelpers: "runtime", extensions }),
+  kiranaEmber(),
+]
+```
+
+```js
+// app/components/card.gjs
+import { css } from "@kirana-style/core"
+import { sx } from "@kirana-style/ember"
+
+const styles = { card: css({ padding: "1rem" }), active: css({ outline: "2px solid" }) }
+
+<template><div class={{sx styles.card (if @active styles.active)}}>{{yield}}</div></template>
+```
+
+`kiranaEmber()` is the Vite adapter run after Embroider, taking template-tag modules, with Ember's
+own modules (`@ember/`, `@glimmer/`, `@embroider/virtual/`) as `externals`. `createSx(prefix)` makes
+the helper for another `names.prefix`.

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@kirana-style/ember",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Kirana for Ember on Embroider and Vite: css() in .gjs and .gts files, and the sx template helper.",
+  "license": "MIT",
+  "author": "The Kirana authors",
+  "homepage": "https://kirana.style",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kirana-style/kirana.git",
+    "directory": "packages/kirana/npm/ember"
+  },
+  "bugs": {
+    "url": "https://github.com/kirana-style/kirana/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./vite": {
+      "types": "./src/vite.d.ts",
+      "default": "./src/vite.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@kirana-style/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "@kirana-style/vite": "0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@kirana-style/vite": {
+      "optional": true
+    }
+  },
+  "files": [
+    "src",
+    "bin",
+    "*.d.ts",
+    "*.css",
+    "README.md",
+    "builders.json",
+    "schemas",
+    "gatsby-node.mjs",
+    "rules",
+    "recommended.json",
+    "strict.json"
+  ]
+}

package/src/index.d.ts

@@ -0,0 +1,5 @@
+import type { Handle } from "@kirana-style/core/internal";
+/** A merge helper for another class-name prefix (`names.prefix`). */
+export declare function createSx(prefix: string): (...handles: Handle[]) => string;
+/** The merge helper for the default prefix, `k`. */
+export declare const sx: (...handles: Handle[]) => string;

package/src/index.js

@@ -0,0 +1,18 @@
+/**
+ * `sx` for Ember templates (D-072). A template reaches the handles in its module's scope, but the
+ * merge `sx` does at build time elsewhere needs a function here: `class={{sx styles.card (if
+ * this.active styles.on)}}` merges the handles with Kirana's runtime, later ones winning, as an
+ * `sx` list does. Ember calls a plain function as a helper.
+ *
+ * A handle with values known only at runtime carries custom properties a class cannot hold; set
+ * those from the component's code, as the [Ember guide](https://kirana.style/docs/frameworks/ember)
+ * shows.
+ */
+import { runtime } from "@kirana-style/core/internal";
+/** A merge helper for another class-name prefix (`names.prefix`). */
+export function createSx(prefix) {
+    const kirana = runtime(prefix, "class");
+    return (...handles) => kirana.sx(handles, [], []).class ?? "";
+}
+/** The merge helper for the default prefix, `k`. */
+export const sx = createSx("k");

package/src/vite.d.ts

@@ -0,0 +1,9 @@
+import type { KiranaViteOptions } from "@kirana-style/vite";
+import type { Plugin } from "vite";
+export type { KiranaViteOptions as KiranaEmberOptions };
+/** Ember's template-tag modules, as Vite names them. */
+export declare const TEMPLATE_TAG: RegExp;
+/** What Embroider resolves and Node.js cannot: Ember's own modules. */
+export declare const EMBER_EXTERNALS: string[];
+export declare function kiranaEmber(options?: KiranaViteOptions): Plugin[];
+export default kiranaEmber;

package/src/vite.js

@@ -0,0 +1,41 @@
+/**
+ * Kirana for Ember on Embroider and Vite (D-072). A `.gjs` or `.gts` file holds a `<template>`
+ * Kirana's parser does not read, so its Vite plugin runs after Embroider's instead and compiles the
+ * JavaScript Embroider emitted for each module, where `css()` calls and their imports are as written.
+ * Its transform takes those modules too, which a Vite plugin's filter would otherwise skip, and
+ * `@ember/`, `@glimmer/` and `@embroider/virtual/` — modules only Embroider resolves — are runtime values (`externals`).
+ *
+ *   plugins: [classicEmberSupport(), ember(), babel({ … }), kiranaEmber()]
+ */
+import kirana from "@kirana-style/vite";
+/** Ember's template-tag modules, as Vite names them. */
+export const TEMPLATE_TAG = /\.g[jt]s(?:[?#]|$)/;
+/** What Embroider resolves and Node.js cannot: Ember's own modules. */
+export const EMBER_EXTERNALS = ["@ember/", "@glimmer/", "@embroider/virtual/"];
+export function kiranaEmber(options = {}) {
+    // Inline options override `kirana.config` key by key, so a project's own `externals` go here.
+    const externals = [...(options.config?.externals ?? []), ...EMBER_EXTERNALS];
+    const [main, late] = kirana({
+        ...options,
+        config: { ...options.config, externals },
+    });
+    const transform = main.transform;
+    return [
+        {
+            ...main,
+            enforce: "post",
+            transform: {
+                ...transform,
+                filter: {
+                    ...transform.filter,
+                    id: {
+                        ...transform.filter.id,
+                        include: [transform.filter.id.include, TEMPLATE_TAG],
+                    },
+                },
+            },
+        },
+        late,
+    ];
+}
+export default kiranaEmber;