tinijs · lamnhan · Apr 29, 2024 · Apr 29, 2024 · Apr 29, 2024 · Apr 29, 2024
diff --git a/apps/tinijs.dev/app/pages/module.ts b/apps/tinijs.dev/app/pages/module.ts
@@ -32,6 +32,24 @@ export class AppPageModule extends TiniComponent {
     return html`
       <h1>Tini Modules</h1>
       <p>Installable modules to extend functionalities.</p>
+
+      <h2>Official modules</h2>
+      <ul>
+        <li>
+          <a href="/module/content">Content</a> - file-based content management
+          system
+        </li>
+        <li><a href="/module/pwa">PWA</a> - turn a TiniJS app into a PWA</li>
+      </ul>
+
+      <h2>Community/local modules</h2>
+      <ul>
+        <li>Add your shared module here</li>
+      </ul>
+      <p>
+        Please see the <a href="/module/author-guide">Author Guide</a> for how
+        to create a module.
+      </p>
     `;
   }
 

diff --git a/apps/tinijs.dev/content/cli-posts/102 - expansion/index.md b/apps/tinijs.dev/content/cli-posts/102 - expansion/index.md
@@ -24,7 +24,10 @@ export default defineTiniConfig({
       'some-name-2'
     ],
 
-    // disable autoload official and local expansions, default: false (auto load)
+    // disable autoload official and local expansions, default: false (auto load all available)
+    // undefined or false: auto load all available
+    // true: disable all auto load
+    // string[]: disable specific ones, example: ['local', '@tinijs/content']
     noAutoExpansions: true,
   },
 

diff --git a/apps/tinijs.dev/content/framework-posts/104 - compile/index.md b/apps/tinijs.dev/content/framework-posts/104 - compile/index.md
@@ -6,4 +6,116 @@
 }
 +++
 
-**TODO**: implements Default Compiler features and add instructions.
+Compile is an optional but recommended step in the dev/build workflow for TiniJS apps. You can think of it as a transformation step that takes the source code and transforms it before forwarding the code to the build tool.
+
+With the **Default Compiler**, you can use these features:
+- Support `SCSS` in `` css`...` ``
+- Minify the content `` html`...` ``
+- Inject environment variables to `configs/<env>.ts` and choose a config file based on the target environment
+- _More in the future ..._
+
+You can config the compile step behaviors in the `tini.config.ts` file.
+
+```js
+export default defineTiniConfig({
+
+  // compile step is enabled by default
+  compile: {
+
+    // default to the Default Compiler (@tinijs/default-compiler)
+    // you can use your own compiler
+    compiler: 'a-compiler',
+
+    // you can set options for the Default Compiler
+    options: {
+      // ignore certain files, please see: https://github.com/micromatch/picomatch
+      ignorePatterns?:  string[],
+      // compile html``, default is enable, set false to disable
+      compileTaggedHTML?: false | {
+        minify?: false; // minify the template literals or not (default is minified)
+      },
+      // compile css``, default is enable, set false to disable
+      // or set options for SASS: https://sass-lang.com/documentation/js-api/interfaces/stringoptions/
+      compileTaggedCSS?: false | SASSOptions,
+    }
+  },
+
+  // or, disable the compile step
+  compile: false,
+
+});
+```
+
+## Compile HTML
+
+Look for `` return html` `` and `` `; `` in your source code, the content inside the template literals will be compiled.
+
+**Limitations**, nested `` html`...` `` will be kept as is, split the nested templates into smaller templates instead:
+
+```ts
+
+class XXX {
+
+  helloTemplate() {
+    return html`<h1>Hello World</h1>`;
+  }
+
+  render() {
+    return html`
+      <div>${this.helloTemplate()}</div>
+    `;
+  }
+}
+```
+
+## Compile CSS
+
+Look for `` css` `` and `` `; ``/`` `, `` in your source code, the content inside the template literals will be compiled.
+
+**Limitations**, use `${}` inside the templates will break SASS compilation, add `/* no-sass */` to skip.
+
+```ts
+const style1 = css`
+  // scss code
+  // will be compiled
+`;
+
+const style2 = `
+  // scss code
+  // will not be compiled
+`;
+
+class XXX {
+
+  static styles = css`
+    /* no-sass */
+
+    // scss code
+    // will not be compiled
+
+    ${style1}
+    ${unsafeCSS(style2)}
+  `;
+
+}
+```
+
+## Client app configs
+
+Put `configs/<env>.ts` files in the `app` folder, the environment variables will be injected into the files.
+
+**IMPORTANT**: all the config in `configs` folder are for the client app only, don't expose sensitive information.
+
+```ts
+export const config: AppConfig = {
+  foo: 'bar',
+  baz: process.env.BAZ,
+  qux: process.env.QUX,
+};
+```
+
+During the `npm run dev` the file `configs/development.ts` will be used, during the `npm run build` the file `configs/production.ts` or `configs/<env>.ts` (flag `--target <env>`) will be used.
+
+```bash
+npx tini build --target qa|staging|xxx
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cli/cli/commands/build.ts b/packages/cli/cli/commands/build.ts
@@ -24,11 +24,10 @@ export const buildCommand = createCLICommand(
     },
   },
   async (args, callbacks) => {
-    const targetEnv = args.target || 'production';
     const tiniProject = await getTiniProject();
     const {config: tiniConfig, hooks} = tiniProject;
     //  preparation
-    exposeEnvs(tiniConfig, targetEnv);
+    exposeEnvs(tiniConfig, args.target || 'production');
     const compiler = await loadCompiler(tiniProject);
     const builder = await loadBuilder(tiniProject);
     // clean

diff --git a/packages/cli/cli/commands/compile.ts b/packages/cli/cli/commands/compile.ts
@@ -3,10 +3,16 @@ import {resolve} from 'pathe';
 import {consola} from 'consola';
 import {green} from 'colorette';
 import {remove} from 'fs-extra/esm';
+import picomatch from 'picomatch';
 
-import {getTiniProject} from '@tinijs/project';
+import {getTiniProject, getProjectDirs} from '@tinijs/project';
 
-import {loadCompiler} from '../utils/build.js';
+import {
+  exposeEnvs,
+  loadCompiler,
+  extractCompileOptions,
+  parseCompileFileContext,
+} from '../utils/build.js';
 import {createCLICommand} from '../utils/cli.js';
 
 export const compileCommand = createCLICommand(
@@ -21,22 +27,33 @@ export const compileCommand = createCLICommand(
         type: 'boolean',
         description: 'Also watch for changes.',
       },
+      target: {
+        alias: 't',
+        type: 'string',
+        description: 'Target: development (default), production, ...',
+      },
     },
   },
   async (args, callbacks) => {
     const tiniProject = await getTiniProject();
-    const {config: tiniConfig} = tiniProject;
-    const {srcDir, compileDir} = tiniConfig;
+    const {config: tiniConfig, hooks} = tiniProject;
+    const projectDirs = getProjectDirs(tiniConfig);
+    const {srcDir, compileDir} = projectDirs;
+    const compileOptions = extractCompileOptions<{
+      ignorePatterns?: string[];
+    }>(tiniConfig.compile);
+    // preparation
+    exposeEnvs(tiniConfig, args.target || 'development');
     const compiler = await loadCompiler(tiniProject, true);
+    // compile
     if (!compiler) {
       callbacks?.onUnavailable();
     } else {
       await compiler.compile();
       if (!args.watch) {
         callbacks?.onSingleCompile(compileDir);
       } else {
-        const srcDirPath = resolve(srcDir);
-        watch(srcDirPath, {ignoreInitial: true})
+        watch(resolve(srcDir), {ignoreInitial: true})
           .on('add', path => {
             callbacks?.onCompileFile('add', path);
             compiler.compileFile(resolve(path));
@@ -45,11 +62,20 @@ export const compileCommand = createCLICommand(
             callbacks?.onCompileFile('change', path);
             compiler.compileFile(resolve(path));
           })
-          .on('unlink', path => {
+          .on('unlink', async path => {
             callbacks?.onCompileFile('unlink', path);
-            remove(
-              resolve(compileDir, resolve(path).replace(`${srcDirPath}/`, ''))
+            const ignoreMatcher = !compileOptions.ignorePatterns
+              ? undefined
+              : picomatch(compileOptions.ignorePatterns);
+            const context = await parseCompileFileContext(
+              path,
+              projectDirs,
+              ignoreMatcher
             );
+            if (!context) return;
+            await hooks.callHook('compile:beforeRemoveFile', context);
+            await remove(context.outPath);
+            await hooks.callHook('compile:afterRemoveFile', context);
           });
         callbacks?.onCompileAndWatch(compileDir);
       }