|
1 | | -import { AddonImplementation } from "ember-cli/lib/models/addon"; |
| 1 | +import config from "@css-blocks/config"; |
| 2 | +import { AnalysisOptions, NodeJsImporter, Options as ParserOptions, OutputMode } from "@css-blocks/core"; |
| 3 | +import type { AST, ASTPlugin, ASTPluginEnvironment, NodeVisitor, Syntax } from "@glimmer/syntax"; |
| 4 | +import { ObjectDictionary } from "@opticss/util"; |
| 5 | +import type { InputNode } from "broccoli-node-api"; |
| 6 | +import TemplateCompilerPlugin, { HtmlBarsOptions } from "ember-cli-htmlbars/lib/template-compiler-plugin"; |
| 7 | +import type EmberApp from "ember-cli/lib/broccoli/ember-app"; |
| 8 | +import type EmberAddon from "ember-cli/lib/models/addon"; |
| 9 | +import type { AddonImplementation, ThisAddon, Tree } from "ember-cli/lib/models/addon"; |
| 10 | +import * as FSTree from "fs-tree-diff"; |
| 11 | +import { OptiCSSOptions } from "opticss"; |
| 12 | + |
| 13 | +type Writeable<T> = { -readonly [P in keyof T]: T[P] }; |
| 14 | + |
| 15 | +const BLOCK_GLOB = "**/*.block.{css,scss,sass,less,styl}"; |
| 16 | +interface EmberASTPluginEnvironment extends ASTPluginEnvironment { |
| 17 | + meta?: { |
| 18 | + moduleName?: string; |
| 19 | + }; |
| 20 | +} |
| 21 | + |
| 22 | +class Visitor implements NodeVisitor { |
| 23 | + moduleName: string; |
| 24 | + syntax: Syntax; |
| 25 | + constructor(moduleName: string, syntax: Syntax) { |
| 26 | + this.moduleName = moduleName; |
| 27 | + this.syntax = syntax; |
| 28 | + } |
| 29 | + ElementNode(node: AST.ElementNode) { |
| 30 | + console.log(`visited ${this.syntax.print(node)}`); |
| 31 | + } |
| 32 | +} |
| 33 | +const NOOP_VISITOR = {}; |
| 34 | + |
| 35 | +class CSSBlocksTemplateCompilerPlugin extends TemplateCompilerPlugin { |
| 36 | + previousSourceTree: FSTree; |
| 37 | + cssBlocksOptions: CSSBlocksEmberOptions; |
| 38 | + constructor(inputTree: InputNode, htmlbarsOptions: HtmlBarsOptions, cssBlocksOptions: CSSBlocksEmberOptions) { |
| 39 | + super(inputTree, htmlbarsOptions); |
| 40 | + this.cssBlocksOptions = cssBlocksOptions; |
| 41 | + this.previousSourceTree = new FSTree(); |
| 42 | + } |
| 43 | + async build() { |
| 44 | + let cssBlockEntries = this.input.entries(".", [BLOCK_GLOB]); |
| 45 | + let currentFSTree = FSTree.fromEntries(cssBlockEntries); |
| 46 | + let patch = this.previousSourceTree.calculatePatch(currentFSTree); |
| 47 | + let removedFiles = patch.filter((change) => change[0] === "unlink"); |
| 48 | + if (cssBlockEntries.length === 0 && removedFiles.length > 0) { |
| 49 | + console.warn(`[WARN] ${removedFiles[0][1]} was just removed and the output directory was not cleaned up.`); |
| 50 | + } |
| 51 | + if (cssBlockEntries.length > 0) { |
| 52 | + } |
| 53 | + await super.build(); |
| 54 | + if (cssBlockEntries.length > 0) { |
| 55 | + await super.build(); |
| 56 | + } |
| 57 | + } |
| 58 | +} |
| 59 | + |
| 60 | +/** |
| 61 | + * The options that can be passed for css blocks to an ember-cli application. |
| 62 | + */ |
| 63 | +export interface CSSBlocksEmberAppOptions { |
| 64 | + "css-blocks"?: CSSBlocksEmberOptions; |
| 65 | +} |
| 66 | + |
| 67 | +export interface CSSBlocksEmberOptions { |
| 68 | + output?: string; |
| 69 | + aliases?: ObjectDictionary<string>; |
| 70 | + analysisOpts?: AnalysisOptions; |
| 71 | + parserOpts?: Writeable<ParserOptions>; |
| 72 | + optimization?: Partial<OptiCSSOptions>; |
| 73 | +} |
2 | 74 |
|
3 | 75 | interface CSSBlocksAddon { |
| 76 | + findSiblingAddon<AddonType>(this: ThisAddon<CSSBlocksAddon>, name: string): ThisAddon<AddonType> | undefined; |
| 77 | + getOptions(this: ThisAddon<CSSBlocksAddon>): CSSBlocksEmberOptions; |
| 78 | + optionsForCacheInvalidation(this: ThisAddon<CSSBlocksAddon>): ObjectDictionary<unknown>; |
| 79 | + astPluginBuilder(env: EmberASTPluginEnvironment): ASTPlugin; |
| 80 | + _options?: CSSBlocksEmberOptions; |
| 81 | +} |
| 82 | +interface HTMLBarsAddon { |
| 83 | + getTemplateCompiler(inputTree: Tree, htmlbarsOptions: HtmlBarsOptions): TemplateCompilerPlugin; |
| 84 | +} |
| 85 | + |
| 86 | +function isAddon(parent: EmberAddon | EmberApp): parent is EmberAddon { |
| 87 | + return !!parent["findOwnAddonByName"]; |
4 | 88 | } |
5 | 89 |
|
6 | 90 | const EMBER_ADDON: AddonImplementation<CSSBlocksAddon> = { |
7 | 91 | name: "@css-blocks/ember", |
| 92 | + |
8 | 93 | init(parent, project) { |
9 | | - return this._super.init && this._super.init.call(this, parent, project); |
| 94 | + this._super.init.call(this, parent, project); |
| 95 | + this.app = this._findHost(); |
10 | 96 | }, |
| 97 | + |
| 98 | + findSiblingAddon(name) { |
| 99 | + if (isAddon(this.parent)) { |
| 100 | + return this.parent.findOwnAddonByName(name); |
| 101 | + } else { |
| 102 | + this.project.findAddonByName(name); |
| 103 | + } |
| 104 | + }, |
| 105 | + |
11 | 106 | included(parent) { |
12 | 107 | this._super.included.apply(this, [parent]); |
| 108 | + this._options = this.getOptions(); |
| 109 | + let htmlBarsAddon = this.findSiblingAddon<HTMLBarsAddon>("ember-cli-htmlbars"); |
| 110 | + if (!htmlBarsAddon) { |
| 111 | + throw new Error(`Using @css-blocks/ember on ${this.parent.name} also requires ember-cli-htmlbars to be an addon for ${this.parent.name}`); |
| 112 | + } |
| 113 | + htmlBarsAddon.getTemplateCompiler = (inputTree: Tree, htmlbarsOptions: HtmlBarsOptions) => { |
| 114 | + return new CSSBlocksTemplateCompilerPlugin(inputTree, htmlbarsOptions, this._options!); |
| 115 | + }; |
| 116 | + }, |
| 117 | + |
| 118 | + astPluginBuilder(env: EmberASTPluginEnvironment): ASTPlugin { |
| 119 | + let {meta, syntax } = env; |
| 120 | + let moduleName = meta?.moduleName; |
| 121 | + return { |
| 122 | + name: `CSS Blocks AST Plugin for ${moduleName}`, |
| 123 | + visitor: moduleName ? new Visitor(moduleName, syntax) : NOOP_VISITOR, |
| 124 | + }; |
| 125 | + }, |
| 126 | + |
| 127 | + setupPreprocessorRegistry(type, registry) { |
| 128 | + if (type !== "parent") { return; } |
| 129 | + // For Ember |
| 130 | + registry.add("htmlbars-ast-plugin", { |
| 131 | + name: "css-blocks-htmlbars", |
| 132 | + plugin: this.astPluginBuilder.bind(this), |
| 133 | + dependencyInvalidation: true, |
| 134 | + cacheKey: () => this.optionsForCacheInvalidation(), |
| 135 | + baseDir: () => __dirname, |
| 136 | + }); |
| 137 | + }, |
| 138 | + |
| 139 | + getOptions() { |
| 140 | + let app = this.app!; |
| 141 | + let root = app.project.root; |
| 142 | + let appOptions = app.options; |
| 143 | + |
| 144 | + if (!appOptions["css-blocks"]) { |
| 145 | + appOptions["css-blocks"] = {}; |
| 146 | + } |
| 147 | + |
| 148 | + // Get CSS Blocks options provided by the application, if present. |
| 149 | + const options = <CSSBlocksEmberOptions>appOptions["css-blocks"]; // Do not clone! Contains non-json-safe data. |
| 150 | + if (!options.aliases) options.aliases = {}; |
| 151 | + if (!options.analysisOpts) options.analysisOpts = {}; |
| 152 | + if (!options.optimization) options.optimization = {}; |
| 153 | + |
| 154 | + if (!options.parserOpts) { |
| 155 | + options.parserOpts = config.searchSync(root) || {}; |
| 156 | + } |
| 157 | + |
| 158 | + // Use the node importer by default. |
| 159 | + options.parserOpts.importer = options.parserOpts.importer || new NodeJsImporter(options.aliases); |
| 160 | + |
| 161 | + // Optimization is always disabled for now, until we get project-wide analysis working. |
| 162 | + if (typeof options.optimization.enabled === "undefined") { |
| 163 | + options.optimization.enabled = app.isProduction; |
| 164 | + } |
| 165 | + |
| 166 | + // Update parserOpts to include the absolute path to our application code directory. |
| 167 | + if (!options.parserOpts.rootDir) { |
| 168 | + options.parserOpts.rootDir = root; |
| 169 | + } |
| 170 | + options.parserOpts.outputMode = OutputMode.BEM_UNIQUE; |
| 171 | + |
| 172 | + if (typeof options.output !== "string") { |
| 173 | + throw new Error(`Invalid css-blocks options in 'ember-cli-build.js': Output must be a string. Instead received ${options.output}.`); |
| 174 | + } |
| 175 | + return options; |
| 176 | + }, |
| 177 | + |
| 178 | + optionsForCacheInvalidation() { |
| 179 | + let aliases = this._options!.aliases; |
| 180 | + let analysisOpts = this._options!.analysisOpts; |
| 181 | + let optimization = this._options!.optimization; |
| 182 | + let parserOpts: Writeable<ParserOptions> & {importerName?: string} = {}; |
| 183 | + Object.assign(parserOpts, this._options!.parserOpts); |
| 184 | + let constructor = parserOpts.importer && parserOpts.importer.constructor; |
| 185 | + parserOpts.importerName = constructor && constructor.name; |
| 186 | + |
| 187 | + return { |
| 188 | + aliases, |
| 189 | + analysisOpts, |
| 190 | + optimization, |
| 191 | + parserOpts, |
| 192 | + }; |
13 | 193 | }, |
14 | | - compileTemplates(addonTree) { |
15 | | - return this._super.compileTemplates.call(this, addonTree); |
16 | | - } |
17 | 194 | }; |
18 | 195 |
|
19 | 196 | module.exports = EMBER_ADDON; |
0 commit comments