@marsx-dev/launcher 0.0.4 → 0.0.8

package/src/cli/init.ts

@@ -2,8 +2,9 @@ import chalk from 'chalk';
 import { spawnSync } from 'child_process';
 import { randomBytes } from 'crypto';
 import path from 'path';
-import { Configuration } from '../configuration';
-import { assert, isDirectory, writeFileMakeDir } from '../utils/utils';
+import { Config, CustomEnvironmentVariables } from '../configuration';
+import { isDirectory, writeFileMakeDir } from '../utils/fileUtils';
+import { assert } from '../utils/textUtils';
 import { CliError } from './index';
 
 const FASTIFY_DEPS = [
@@ -53,23 +54,17 @@ const V3_DEPS = [
 
 const DEFAULT_DEPS = [...FASTIFY_DEPS, ...COMMON_DEPS, ...V3_DEPS];
 
-const DEMO_BOOTER = `<json id='metadata'>
-{"version": 4, "restartOnChange": true}
-</json>
-
-
-<script id='BlockFunction' lang='tsx'>
-export default async () => {
-    console.log('MarsX loaded!')
-};
-</script>`;
-
 export async function initProject(projectName: string) {
   if (!projectName.match(/^\w+$/) || projectName !== projectName.toLowerCase()) {
     throw new CliError(
       `Project name "${projectName}" may contain only lower case alphanumeric characters and underscores (eg. my_project_name)`,
     );
   }
+  const name = {
+    snakeCase: projectName,
+    withDashes: projectName.replace('_', '-'),
+    noSep: projectName.replace('_', ''),
+  };
 
   const projectDir = path.resolve(projectName);
 
@@ -80,7 +75,7 @@ export async function initProject(projectName: string) {
   console.log(`Creating a new MarsX project in ${chalk.green(projectDir)}`);
 
   const packageJson = {
-    name: projectName,
+    name: name.withDashes,
     version: '0.0.0',
     private: true,
     scripts: {
@@ -91,24 +86,24 @@ export async function initProject(projectName: string) {
   const packageJsonStr = JSON.stringify(packageJson, null, 2);
   await writeFileMakeDir(path.join(projectDir, 'package.json'), packageJsonStr);
 
-  const config: Configuration = {
+  const config: Config = {
     production: false,
     port: 3000,
     blocksDir: 'blocks',
     cacheDir: '.cache',
     mongoConn: '<CONN_STR>',
-    mongoDbName: projectName,
+    mongoDbName: name.withDashes,
     azureStorageConnection: '<CONN_STR>',
-    azureStorageAccountName: projectName,
-    azureStorageUrl: `https://${projectName}.blob.core.windows.net`,
+    azureStorageAccountName: name.noSep,
+    azureStorageUrl: `https://${name.noSep}.blob.core.windows.net`,
     webFilesTable: 'webFiles',
     webRecentFilesTable: 'webRecentFiles',
     webFilesBlob: 'web-files',
-    secret: (await randomBytes(48)).toString('hex'),
+    secret: (await randomBytes(32)).toString('hex'),
     importProjects: [
       {
-        name: 'mars-ide',
-        url: 'https://ide.marscloud.dev',
+        name: 'marsx-core',
+        url: 'https://core.marsx.dev',
         api_key: '<API_KEY>',
         git_commit_ish: 'main',
       },
@@ -116,26 +111,32 @@ export async function initProject(projectName: string) {
   };
 
   await writeFileMakeDir(path.join(projectDir, 'config', 'default.json'), JSON.stringify(config, null, 2));
+  await writeFileMakeDir(
+    path.join(projectDir, 'config', 'custom-environment-variables.json'),
+    JSON.stringify(CustomEnvironmentVariables, null, 2),
+  );
   await writeFileMakeDir(path.join(projectDir, '.gitignore'), 'node_modules\ndist\n.cache\n');
 
-  await writeFileMakeDir(path.join(projectDir, 'blocks', 'Booter.service.vue'), DEMO_BOOTER);
-
   function run(...args: string[]) {
     const cmd = args[0];
     assert(cmd);
-    spawnSync(cmd, args.slice(1), { cwd: projectDir, stdio: 'inherit' });
+    spawnSync(cmd, args.slice(1), { cwd: projectDir, stdio: 'inherit', shell: true });
   }
-  console.log('Installing dependencies. This might take a couple of minutes.');
+
+  console.log('\nInstalling dependencies. This might take a couple of minutes.');
   run('npm', 'i', ...DEFAULT_DEPS);
+  console.log('');
 
-  run('git', 'init');
+  run('git', 'init', '--initial-branch=main');
   run('git', 'add', '.gitignore');
   run('git', 'add', '-A');
-  run('git', 'commit', '-m', 'Initial commit');
-  console.log('Initialized git repository and created initial commit.');
+  run('git', 'commit', '-m', 'Initial MarsX commit');
 
-  console.log(chalk.yellow(`\nMake sure to update parameters in config/default.json`));
+  console.log(`\n${chalk.green('Success!')} Created ${projectName} at ${projectDir}`);
 
-  console.log(`${chalk.green('Success!')} Created ${projectName} at ${projectDir}`);
-  console.log(chalk.dim(`\nInside that directory, you can start MarsX with\n\n    cd ${projectName}\n    npm run start\n`));
+  console.log(`\nNext steps:`);
+  console.log(`  - Open new project directory: ${chalk.underline(`cd ${projectName}`)}`);
+  console.log(`  - Contact MarsX to get config params and update them: ${chalk.underline('code config/default.json')}`);
+  console.log(`  - (optionally) Migrate V3 blocks using: ${chalk.underline('npx marsx migrate')}`);
+  console.log(`  - Start local server: ${chalk.underline('npm run start')}`);
 }

package/src/cli/migrate.ts

@@ -3,7 +3,7 @@ import { MongoClient } from 'mongodb';
 import path from 'path';
 import { config } from '../configuration';
 import { serializeSfc } from '../utils/sfc';
-import { writeFileMakeDir } from '../utils/utils';
+import { writeFileMakeDir } from '../utils/fileUtils';
 import { convertV3ToSfc, V3MongoBlock } from '../utils/v3';
 
 export async function migrateV3ToV4() {

package/src/cli/start.ts

@@ -1,7 +1,7 @@
 import child_process from 'child_process';
 import { config } from '../configuration';
 import { launchBooter } from '../launcher';
-import { assert } from '../utils/utils';
+import { assert } from '../utils/textUtils';
 
 export const RESTART_EXIT_CODe = 9;
 

package/src/configuration.ts

@@ -1,7 +1,9 @@
 process.env['SUPPRESS_NO_CONFIG_WARNING'] = 'true';
 import configModule from 'config';
+import _ from 'lodash';
 import path from 'path';
-import { assert } from './utils/utils';
+import * as yup from 'yup';
+import { ValidationError } from 'yup';
 
 export interface ImportProjectConfig {
   name: string;
@@ -10,44 +12,93 @@ export interface ImportProjectConfig {
   git_commit_ish?: string | undefined;
 }
 
-const ensureType =
-  <T>(typeName: string) =>
-  (configName: string): T => {
-    const value = configModule.get(configName);
-    assert(typeof value === typeName);
-    return value as T;
-  };
+export interface Config {
+  production: boolean;
+  port: number;
+  blocksDir: string;
+  cacheDir: string;
+  mongoConn: string;
+  mongoDbName: string;
+  azureStorageConnection: string;
+  azureStorageAccountName: string;
+  azureStorageUrl: string;
+  secret: string;
+  webFilesTable: string;
+  webRecentFilesTable: string;
+  webFilesBlob: string;
+  importProjects: ImportProjectConfig[];
+}
+
+export class ConfigError extends Error {}
+
+const ImportProjectSchema = yup.object({
+  name: yup.string().required(),
+  url: yup.string().url().required(),
+  api_key: yup.string().required(),
+  git_commit_ish: yup.string().optional(),
+});
 
-const ensureString = ensureType<string>('string');
-const ensureBoolean = ensureType<boolean>('boolean');
-const ensureNumber = ensureType<number>('number');
+const ConfigSchema = yup.object().shape({
+  production: yup.boolean().required(),
+  port: yup.number().required().positive().integer(),
+  blocksDir: yup
+    .string()
+    .required()
+    .transform(v => path.resolve(v)),
+  cacheDir: yup
+    .string()
+    .required()
+    .transform(v => path.resolve(v)),
+  mongoConn: yup.string().required(),
+  mongoDbName: yup.string().required(),
+  azureStorageConnection: yup.string().required(),
+  azureStorageAccountName: yup.string().required(),
+  azureStorageUrl: yup.string().required(),
+  secret: yup.string().required(),
+  webFilesTable: yup.string().required(),
+  webRecentFilesTable: yup.string().required(),
+  webFilesBlob: yup.string().required(),
+  importProjects: yup.array().of(ImportProjectSchema).required(),
+});
+
+function ErrorThrowingConfig(errorMessage: string) {
+  return new Proxy({} as never, {
+    get() {
+      throw new ConfigError(errorMessage);
+    },
+  });
+}
 
-function validatedConfig() {
+function validateConfig(): Config {
   if (configModule.util.getConfigSources().length === 0) {
-    return new Proxy({} as never, {
-      get() {
-        throw new Error('Config file not found, ensure you have "config/default.json" file.');
-      },
-    });
+    return ErrorThrowingConfig('Config file not found, ensure you have "config/default.json" file.');
   }
 
-  return {
-    production: ensureBoolean('production'),
-    port: ensureNumber('port'),
-    blocksDir: path.resolve(ensureString('blocksDir')),
-    cacheDir: path.resolve(ensureString('cacheDir')),
-    mongoConn: ensureString('mongoConn'),
-    mongoDbName: ensureString('mongoDbName'),
-    azureStorageConnection: ensureString('azureStorageConnection'),
-    azureStorageAccountName: ensureString('azureStorageAccountName'),
-    azureStorageUrl: ensureString('azureStorageUrl'),
-    secret: ensureString('secret'),
-    webFilesTable: ensureString('webFilesTable'),
-    webRecentFilesTable: ensureString('webRecentFilesTable'),
-    webFilesBlob: ensureString('webFilesBlob'),
-    importProjects: configModule.get<ImportProjectConfig[]>('importProjects'),
-  };
+  const configObject = configModule.util.toObject();
+  try {
+    return ConfigSchema.validateSync(configObject, { abortEarly: false, stripUnknown: false });
+  } catch (e) {
+    if (e instanceof ValidationError) {
+      return ErrorThrowingConfig(e.errors.join('\n'));
+    } else {
+      throw e;
+    }
+  }
+}
+
+export const config = validateConfig();
+
+function getEnvVarMapping() {
+  const result: Record<string, string | { __name: string; __format: string }> = {};
+  for (const [name, field] of Object.entries(ConfigSchema.fields)) {
+    const envVar = `MARSX_${_.snakeCase(name).toUpperCase()}`;
+    if ('type' in field && (field.type === 'object' || field.type === 'array')) {
+      result[name] = { __name: envVar, __format: 'json' };
+    } else {
+      result[name] = envVar;
+    }
+  }
+  return result;
 }
 
-export const config = validatedConfig();
-export type Configuration = typeof config;
+export const CustomEnvironmentVariables = getEnvVarMapping();

package/src/index.ts

@@ -1,5 +1,6 @@
-export { config, ImportProjectConfig, Configuration } from './configuration';
+export { config, ImportProjectConfig, Config } from './configuration';
 export { compileSfcSource, transpileTypescript } from './utils/compile';
-export { parseSFC, serializeSfc, SfcBlock, SfcIdentity, SfcSource, parseSfcIdentity, serializeSfcIdentity } from './utils/sfc';
-export * as utils from './utils/utils';
+export { parseSFC, serializeSfc, parseSfcPath, serializeSfcPath, SfcBlock, SfcPath, SfcSource } from './utils/sfc';
 export { convertSfcToV3, convertV3ToSfc, V3MongoBlock } from './utils/v3';
+export * as textUtils from './utils/textUtils';
+export * as fileUtils from './utils/fileUtils';

package/src/launcher.ts

@@ -2,7 +2,8 @@ import { config } from './configuration';
 import { loadAllBlocks } from './loader';
 import { compileSfcSource, transpileTypescript } from './utils/compile';
 import { parseSFC, serializeSfc } from './utils/sfc';
-import { assert, writeFileMakeDir } from './utils/utils';
+import { writeFileMakeDir } from './utils/fileUtils';
+import { assert } from './utils/textUtils';
 import { convertSfcToV3, convertV3ToSfc } from './utils/v3';
 
 const LAUNCHER_UTILS = {
@@ -19,7 +20,7 @@ const LAUNCHER_UTILS = {
 export async function launchBooter(booterBlockName = 'Booter') {
   const allBlocks = await loadAllBlocks();
 
-  const booterBlocks = allBlocks.filter(b => b.identity.name === booterBlockName);
+  const booterBlocks = allBlocks.filter(b => b.path.name === booterBlockName);
   if (booterBlocks.length === 0)
     throw new Error(`Booter block ${booterBlockName} not found. Ensure you have it locally or it is imported.`);
 

package/src/loader.ts

@@ -6,7 +6,7 @@ import _ from 'lodash';
 import path from 'path';
 import { config, ImportProjectConfig } from './configuration';
 import { parseSFC, SfcBlock } from './utils/sfc';
-import { isFile, listFilesRecursive, writeFileMakeDir } from './utils/utils';
+import { isFile, listFilesRecursive, writeFileMakeDir } from './utils/fileUtils';
 import { convertV3ToSfc, V3MongoBlock } from './utils/v3';
 
 async function downloadFromExternal(externalImport: ImportProjectConfig): Promise<SfcBlock[]> {

package/src/utils/compile.ts

@@ -3,7 +3,8 @@ import path from 'path';
 import ts from 'typescript';
 import { config } from '../configuration';
 import { SfcBlock } from './sfc';
-import { assert, writeFileMakeDir } from './utils';
+import { writeFileMakeDir } from './fileUtils';
+import { assert } from './textUtils';
 
 function genSourceMapComment(sourceMap: SourceMapPayload): string {
   return `\n//# sourceMappingURL=data:application/json;base64,${Buffer.from(JSON.stringify(sourceMap)).toString('base64')}`;
@@ -47,10 +48,10 @@ export function transpileTypescript(
 
 export async function compileSfcSource(sfcBlock: SfcBlock, sourceId: string): Promise<string> {
   const sourceCode = sfcBlock.sources[sourceId];
-  if (!sourceCode) throw new Error(`Source code block ${sourceId} not found in ${sfcBlock.identity.filePath}`);
+  if (!sourceCode) throw new Error(`Source code block ${sourceId} not found in ${sfcBlock.path.filePath}`);
 
-  const compiledFilePath = path.join(config.cacheDir, 'compiled', `${sfcBlock.identity.filePath}.${sourceId}.js`);
-  const originalFilePath = path.join(config.blocksDir, sfcBlock.identity.filePath);
+  const compiledFilePath = path.join(config.cacheDir, 'compiled', `${sfcBlock.path.filePath}.${sourceId}.js`);
+  const originalFilePath = path.join(config.blocksDir, sfcBlock.path.filePath);
   const code = transpileTypescript(sourceCode.source, { compiledFilePath, originalFilePath, lineOffset: sourceCode.lineOffset });
 
   await writeFileMakeDir(compiledFilePath, code, 'utf-8');

package/src/utils/{utils.ts → fileUtils.ts}

@@ -5,24 +5,6 @@ import { Mode, ObjectEncodingOptions, OpenMode } from 'node:fs';
 import { Stream } from 'node:stream';
 import path from 'path';
 
-export function assert(value: unknown, message = 'value must be defined'): asserts value {
-  if (!value) {
-    throw new Error(message);
-  }
-}
-
-export function escapeCloseTag(str: string, tag: string): string {
-  return str.replaceAll(`</${tag}>`, `</ ${tag}>`);
-}
-
-export function unescapeCloseTag(str: string, tag: string): string {
-  return str.replaceAll(`</ ${tag}>`, `</${tag}>`);
-}
-
-export function escapeHtmlAttr(str: string): string {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-
 export async function listFilesRecursive(dir: string): Promise<string[]> {
   const entries = await fs.readdir(dir);
 

package/src/utils/sfc.ts

@@ -1,29 +1,36 @@
-import { CompilerError, TextModes } from '@vue/compiler-core';
-import * as CompilerDOM from '@vue/compiler-dom';
-import { NodeTypes } from '@vue/compiler-dom';
-import stringify from 'json-stable-stringify';
+import { CompilerError } from '@vue/compiler-core';
 import JSON5 from 'json5';
 import _ from 'lodash';
 import path from 'path';
-import prettier, { Options } from 'prettier';
-import { escapeCloseTag, escapeHtmlAttr, unescapeCloseTag } from './utils';
+import { escapeCloseTag, escapeHtmlAttr, parseVueLike, stableHtmlAttributes, stablePrettyJson, unescapeCloseTag } from './textUtils';
+
+export const METADATA_SECTION_ID = 'metadata';
+export const MARS_SFC_EXT = 'mars';
 
-export const METADATA = 'metadata';
-export const SFC_EXT = 'vue';
 const SAVE_EMPTY_SOURCES = true;
 
-export type SfcIdentity = {
+export type SfcPath = {
   folder: string;
   name: string;
   blockTypeName: string;
   ext: string;
-  // Derived
-  fullName: string;
   filePath: string;
 };
 
-export function parseSfcIdentity(filePath: string): SfcIdentity {
-  // Blog/BlogPost.page.vue => {id: "BlogPost.page", folder:"Blog", name: "BlogPost", blockTypeName: "page", ext: "vue", fullName: "Blog.BlogPost"}
+export type SfcSource = {
+  source: string;
+  lang: keyof typeof LANG_TAG_MAP | string | undefined;
+  props?: Record<string, string | undefined>;
+  lineOffset?: number;
+};
+
+export type SfcBlock = { path: SfcPath } & (
+  | { metadata: Record<string, unknown>; jsons: Record<string, unknown>; sources: Record<string, SfcSource>; rawContent: null }
+  | { metadata: EmptyObject; jsons: EmptyObject; sources: EmptyObject; rawContent: Buffer }
+);
+
+export function parseSfcPath(filePath: string): SfcPath {
+  // Blog/BlogPost.page.mars => {folder:"Blog", name: "BlogPost", blockTypeName: "page", ext: "mars", fullName: "Blog.BlogPost"}
   const originalParsed = path.parse(filePath);
   const withoutExt = originalParsed.name;
   const ext = originalParsed.ext.slice(1);
@@ -32,19 +39,16 @@ export function parseSfcIdentity(filePath: string): SfcIdentity {
   if (!parsed.name || !parsed.ext) throw new Error(`Invalid block file path: ${filePath}`);
   const blockTypeName = parsed.ext.slice(1);
 
-  const namespace = originalParsed.dir.replace(/\//g, '.');
-  const fullName = namespace.length > 0 ? `${namespace}.${parsed.name}` : parsed.name;
   return {
     folder: originalParsed.dir,
     name: parsed.name,
     blockTypeName,
     ext,
-    fullName,
     filePath,
   };
 }
 
-export function serializeSfcIdentity(identity: SfcIdentity): string {
+export function serializeSfcPath(identity: SfcPath): string {
   return path.join(identity.folder, `${identity.name}.${identity.blockTypeName}.${identity.ext}`);
 }
 
@@ -67,81 +71,52 @@ const LANG_TAG_MAP = {
   text: 'text',
 };
 
-export type SfcSource = { source: string; lang: keyof typeof LANG_TAG_MAP | string | undefined; lineOffset?: number };
-
-export type SfcBlock = { identity: SfcIdentity } & (
-  | { metadata: Record<string, unknown>; jsons: Record<string, unknown>; sources: Record<string, SfcSource>; rawContent: null }
-  | { metadata: EmptyObject; jsons: EmptyObject; sources: EmptyObject; rawContent: Buffer }
-);
-
-function getNodeAttr(node: CompilerDOM.ElementNode, attr: string) {
-  return node.props.map(p => (p.name == attr && p.type === NodeTypes.ATTRIBUTE ? p.value?.content : undefined)).find(p => !!p);
-}
-
 export function parseSFC(filePath: string, content: Buffer): SfcBlock {
-  const identity = parseSfcIdentity(filePath);
-  if (identity.ext !== SFC_EXT) {
-    return { identity, metadata: {}, jsons: {}, sources: {}, rawContent: content };
+  const sfcPath = parseSfcPath(filePath);
+  if (sfcPath.ext !== MARS_SFC_EXT) {
+    return { path: sfcPath, metadata: {}, jsons: {}, sources: {}, rawContent: content };
   }
 
-  const errors: (CompilerError | SyntaxError)[] = [];
-
-  const ast = CompilerDOM.parse(content.toString('utf-8'), {
-    // there are no components at SFC parsing level
-    isNativeTag: () => true,
-    // preserve all whitespaces
-    isPreTag: () => true,
-    getTextMode: () => TextModes.RAWTEXT,
-    onError: e => errors.push(e),
-  });
-
   const block: SfcBlock = {
-    identity: parseSfcIdentity(filePath),
+    path: parseSfcPath(filePath),
     metadata: {},
     jsons: {},
     sources: {},
     rawContent: null,
   };
   const seenIds = new Set<string>();
+  const errors: (CompilerError | SyntaxError)[] = [];
 
-  ast.children.forEach(node => {
-    if (node.type === NodeTypes.ELEMENT) {
-      const child = node.children.length === 1 ? node.children[0] : null;
-      const content = child && child.type === NodeTypes.TEXT ? child.content : null;
+  for (const node of parseVueLike(content.toString('utf-8'), errors)) {
+    const { id: sectionId, lang, ...props } = node.props;
 
-      if (content) {
-        const sectionId = getNodeAttr(node, 'id');
+    if (!sectionId) {
+      errors.push({ name: `missing-id`, message: `Id property is missing`, code: 0, loc: node.loc });
+      continue;
+    }
+    if (seenIds.has(sectionId)) {
+      errors.push({ name: `duplicate-id`, message: `Duplicate section id: ${sectionId}`, code: 0, loc: node.loc });
+      continue;
+    }
+    seenIds.add(sectionId);
 
-        if (!sectionId) {
-          errors.push({ name: `missing-id`, message: `Id property is missing`, code: 0, loc: node.loc });
-          return;
-        }
-        if (seenIds.has(sectionId)) {
-          errors.push({ name: `duplicate-id`, message: `Duplicate section id: ${sectionId}`, code: 0, loc: node.loc });
-          return;
-        }
-        seenIds.add(sectionId);
-
-        if (node.tag === 'json') {
-          try {
-            const jsonData = JSON5.parse(content);
-            if (sectionId === METADATA) {
-              block.metadata = jsonData;
-            } else {
-              block.jsons[sectionId] = jsonData;
-            }
-          } catch (e) {
-            errors.push({ name: 'invalid-json', message: `${e}`, code: 0, loc: node.loc });
-          }
+    if (node.tag === 'json') {
+      try {
+        const jsonData = JSON5.parse(node.content);
+        if (sectionId === METADATA_SECTION_ID) {
+          block.metadata = jsonData;
         } else {
-          const source = unescapeCloseTag(content.slice(1, -1), node.tag);
-          const lang = getNodeAttr(node, 'lang');
-          const lineOffset = node.loc.start.line;
-          block.sources[sectionId] = { source, lang, lineOffset };
+          block.jsons[sectionId] = jsonData;
         }
+      } catch (e) {
+        errors.push({ name: 'invalid-json', message: `${e}`, code: 0, loc: node.loc });
       }
+    } else {
+      const source = unescapeCloseTag(node.content.slice(1, -1), node.tag);
+      const lineOffset = node.loc.start.line;
+      block.sources[sectionId] = { source, lang, props, lineOffset };
     }
-  });
+  }
 
   if (errors.length) {
     throw new Error(`Parsing SFC ${filePath} failed with ${JSON.stringify(errors)}`);
@@ -150,28 +125,30 @@ export function parseSFC(filePath: string, content: Buffer): SfcBlock {
   return block;
 }
 
-const PRETTIER_JSON_CONFIG: Options = { parser: 'json5', printWidth: 120, trailingComma: 'all' };
-
 export function serializeSfc(block: SfcBlock): { filePath: string; content: Buffer } {
-  const filePath = serializeSfcIdentity(block.identity);
-  if (block.identity.ext !== SFC_EXT) {
-    if (block.rawContent === null) throw new Error(`SfcBlock must have rawContent if ext!="${SFC_EXT}"`);
+  const filePath = serializeSfcPath(block.path);
+  if (block.path.ext !== MARS_SFC_EXT) {
+    if (block.rawContent === null) throw new Error(`SfcBlock must have rawContent if ext!="${MARS_SFC_EXT}"`);
     return { filePath, content: block.rawContent };
   }
 
-  if (block.rawContent !== null) throw new Error(`SfcBlock cannot have rawContent if ext=="${SFC_EXT}"`);
+  if (block.rawContent !== null) throw new Error(`SfcBlock cannot have rawContent if ext=="${MARS_SFC_EXT}"`);
 
   let content = '';
 
-  for (const [name, source] of [[METADATA, block.metadata] as const, ..._.sortBy(Object.entries(block.jsons), e => e[0])]) {
-    const jsonStr = prettier.format('(' + stringify(source) + ')', PRETTIER_JSON_CONFIG);
+  for (const [name, source] of [[METADATA_SECTION_ID, block.metadata] as const, ..._.sortBy(Object.entries(block.jsons), e => e[0])]) {
+    const jsonStr = stablePrettyJson(source);
     content += `<json id="${escapeHtmlAttr(name)}">\n${jsonStr}</json>\n\n`;
   }
 
   for (const [name, source] of _.sortBy(Object.entries(block.sources), e => e[0])) {
     if (!SAVE_EMPTY_SOURCES && !source.source.trim()) continue;
-    const tag = (LANG_TAG_MAP as Record<string, string>)[source.lang || ''] || 'script';
-    content += `<${tag} id="${escapeHtmlAttr(name)}" lang="${source.lang}">\n${escapeCloseTag(source.source, tag)}\n</${tag}>\n\n`;
+    const tag = (LANG_TAG_MAP as Record<string, string>)[source.lang || ''] || 'text';
+    const id = escapeHtmlAttr(name);
+    const lang = escapeHtmlAttr(source.lang || '');
+    const props = stableHtmlAttributes(source.props);
+    const text = escapeCloseTag(source.source, tag);
+    content += `<${tag} id="${id}" lang="${lang}"${props}>\n${text}\n</${tag}>\n\n`;
   }
 
   return { filePath, content: Buffer.from(content, 'utf-8') };