wip: compile to colocate props?
This commit is contained in:
bholmesdev
parent
4c348b63b4
commit
54a9f099a8
5 changed files with 158 additions and 2 deletions
|
|
@ -8,6 +8,8 @@ export interface Props {
|
|||
title?: string;
|
||||
}
|
||||
|
||||
export const example = true;
|
||||
|
||||
const labelByType = {
|
||||
note: 'Note',
|
||||
tip: 'Tip',
|
||||
|
|
|
|||
57
examples/with-markdoc/src/embeds/aside.astro.js
Normal file
57
examples/with-markdoc/src/embeds/aside.astro.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import {
|
||||
render as $$render,
|
||||
createAstro as $$createAstro,
|
||||
createComponent as $$createComponent,
|
||||
maybeRenderHead as $$maybeRenderHead,
|
||||
renderSlot as $$renderSlot,
|
||||
addAttribute as $$addAttribute
|
||||
} from "astro/server/index.js";
|
||||
import "/Users/benholmes/Repositories/astro/examples/with-markdoc/src/embeds/aside.astro?astro&type=style&index=0&lang.css";
|
||||
const $$Astro = $$createAstro();
|
||||
const Astro = $$Astro;
|
||||
export const example = true;
|
||||
const $$Aside = $$createComponent(async ($$result, $$props, $$slots) => {
|
||||
const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
|
||||
Astro2.self = $$Aside;
|
||||
const labelByType = {
|
||||
note: "Note",
|
||||
tip: "Tip",
|
||||
caution: "Caution",
|
||||
danger: "Danger"
|
||||
};
|
||||
const { type = "note" } = Astro2.props;
|
||||
const title = Astro2.props.title ?? labelByType[type] ?? "";
|
||||
const icons = {
|
||||
note: {
|
||||
viewBox: "0 0 18 18",
|
||||
d: "M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z"
|
||||
},
|
||||
tip: {
|
||||
viewBox: "0 0 18 18",
|
||||
d: "M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z"
|
||||
},
|
||||
caution: {
|
||||
viewBox: "-1 1 18 18",
|
||||
d: "M8.9 1.5C8.7 1.2 8.4 1 8 1s-.7.2-.9.5l-7 12a1 1 0 0 0 0 1c.2.3.6.5 1 .5H15c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1l-7-12zM9 13H7v-2h2v2zm0-3H7V6h2v4z"
|
||||
},
|
||||
danger: {
|
||||
viewBox: "0 1 14 17",
|
||||
d: "M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z"
|
||||
}
|
||||
};
|
||||
const { viewBox, d } = icons[type];
|
||||
return $$render`${$$maybeRenderHead($$result)}<aside${$$addAttribute(`content ${type} astro-C6FK6RS3`, "class")}${$$addAttribute(title, "aria-label")}>
|
||||
<p class="title astro-C6FK6RS3" aria-hidden="true">
|
||||
<span class="icon astro-C6FK6RS3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"${$$addAttribute(viewBox, "viewBox")}${$$addAttribute(16, "width")}${$$addAttribute(16, "height")} class="astro-C6FK6RS3">
|
||||
<path fill-rule="evenodd"${$$addAttribute(d, "d")} class="astro-C6FK6RS3"></path>
|
||||
</svg>
|
||||
</span>
|
||||
${title}
|
||||
</p>
|
||||
<section class="astro-C6FK6RS3">
|
||||
${$$renderSlot($$result, $$slots["default"])}
|
||||
</section>
|
||||
</aside>`;
|
||||
}, "/Users/benholmes/Repositories/astro/examples/with-markdoc/src/embeds/aside.astro");
|
||||
export default $$Aside;
|
||||
|
|
@ -42,6 +42,7 @@
|
|||
"test:match": "mocha --timeout 20000 -g"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/compiler": "^1.4.0",
|
||||
"@astrojs/prism": "^2.1.2",
|
||||
"@markdoc/markdoc": "^0.3.0",
|
||||
"esbuild": "^0.17.12",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { isPropsDef, markdocAttributesFromZodProps, usedDefinePropsSymbol } from './props.js';
|
||||
/* eslint-disable no-console */
|
||||
import type { Node, Schema } from '@markdoc/markdoc';
|
||||
import { transform, type TransformResult } from '@astrojs/compiler';
|
||||
import Markdoc from '@markdoc/markdoc';
|
||||
import glob from 'fast-glob';
|
||||
import type { AstroConfig, AstroIntegration, ContentEntryType, HookParameters } from 'astro';
|
||||
|
|
@ -14,7 +15,7 @@ import type * as rollup from 'rollup';
|
|||
import { loadMarkdocConfig, type MarkdocConfigResult } from './load-config.js';
|
||||
import { setupConfig } from './runtime.js';
|
||||
import path from 'node:path';
|
||||
import type { Plugin } from 'vite';
|
||||
import { normalizePath, transformWithEsbuild, type Plugin } from 'vite';
|
||||
|
||||
type SetupHookParams = HookParameters<'astro:config:setup'> & {
|
||||
// `contentEntryType` is not a public API
|
||||
|
|
@ -52,6 +53,27 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration
|
|||
let componentPathByName: Record<string, string> = {};
|
||||
const embedsDir = new URL('embeds/', astroConfig.srcDir);
|
||||
for (const tagPropsModule of tagPropsModules) {
|
||||
const astroFilePath = tagPropsModule.replace(/\.props\.js$/, '.astro');
|
||||
const astroFileContent = await fs.promises.readFile(astroFilePath, 'utf-8');
|
||||
const compiled = await compileAstroFile({
|
||||
astroConfig,
|
||||
filename: astroFilePath,
|
||||
source: astroFileContent,
|
||||
});
|
||||
const builtJs = await transformWithEsbuild(compiled.code, astroFilePath, {
|
||||
loader: 'ts',
|
||||
target: 'esnext',
|
||||
sourcemap: 'external',
|
||||
tsconfigRaw: {
|
||||
compilerOptions: {
|
||||
// Ensure client:only imports are treeshaken
|
||||
importsNotUsedAsValues: 'remove',
|
||||
preserveValueImports: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
const compiledAstroFilePath = tagPropsModule.replace(/\.props\.js$/, '.astro.js');
|
||||
await fs.promises.writeFile(compiledAstroFilePath, builtJs.code);
|
||||
const mod = await import(tagPropsModule);
|
||||
if (typeof mod !== 'object' || mod == null) {
|
||||
throw new MarkdocError({
|
||||
|
|
@ -104,7 +126,7 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration
|
|||
})
|
||||
.join(',\n')}
|
||||
};`;
|
||||
console.log(code);
|
||||
// console.log(code);
|
||||
return code;
|
||||
}
|
||||
},
|
||||
|
|
@ -281,3 +303,74 @@ function shouldOptimizeImage(src: string) {
|
|||
// Optimize anything that is NOT external or an absolute path to `public/`
|
||||
return !isValidUrl(src) && !src.startsWith('/');
|
||||
}
|
||||
|
||||
async function compileAstroFile({
|
||||
astroConfig,
|
||||
filename,
|
||||
source,
|
||||
}: {
|
||||
astroConfig: AstroConfig;
|
||||
filename: string;
|
||||
source: string;
|
||||
}): Promise<TransformResult> {
|
||||
let transformResult: TransformResult;
|
||||
|
||||
try {
|
||||
// Transform from `.astro` to valid `.ts`
|
||||
// use `sourcemap: "both"` so that sourcemap is included in the code
|
||||
// result passed to esbuild, but also available in the catch handler.
|
||||
transformResult = await transform(source, {
|
||||
compact: astroConfig.compressHTML,
|
||||
filename,
|
||||
normalizedFilename: normalizeFilename(filename, astroConfig.root),
|
||||
sourcemap: 'both',
|
||||
internalURL: 'astro/server/index.js',
|
||||
astroGlobalArgs: JSON.stringify(astroConfig.site),
|
||||
scopedStyleStrategy: astroConfig.scopedStyleStrategy,
|
||||
resultScopedSlot: true,
|
||||
async resolvePath(specifier) {
|
||||
return resolvePath(specifier, filename);
|
||||
},
|
||||
});
|
||||
} catch (err: any) {
|
||||
// The compiler should be able to handle errors by itself, however
|
||||
// for the rare cases where it can't let's directly throw here with as much info as possible
|
||||
throw new MarkdocError({
|
||||
message: 'Failed to transform embed',
|
||||
location: {
|
||||
file: filename,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return transformResult;
|
||||
}
|
||||
|
||||
function normalizeFilename(filename: string, root: URL) {
|
||||
const normalizedFilename = normalizePath(filename);
|
||||
const normalizedRoot = normalizePath(fileURLToPath(root));
|
||||
if (normalizedFilename.startsWith(normalizedRoot)) {
|
||||
return normalizedFilename.slice(normalizedRoot.length - 1);
|
||||
} else {
|
||||
return normalizedFilename;
|
||||
}
|
||||
}
|
||||
|
||||
function resolvePath(specifier: string, importer: string) {
|
||||
if (specifier.startsWith('.')) {
|
||||
const absoluteSpecifier = path.resolve(path.dirname(importer), specifier);
|
||||
return resolveJsToTs(normalizePath(absoluteSpecifier));
|
||||
} else {
|
||||
return specifier;
|
||||
}
|
||||
}
|
||||
|
||||
function resolveJsToTs(filePath: string) {
|
||||
if (filePath.endsWith('.jsx') && !fs.existsSync(filePath)) {
|
||||
const tryPath = filePath.slice(0, -4) + '.tsx';
|
||||
if (fs.existsSync(tryPath)) {
|
||||
return tryPath;
|
||||
}
|
||||
}
|
||||
return filePath;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3973,6 +3973,9 @@ importers:
|
|||
|
||||
packages/integrations/markdoc:
|
||||
dependencies:
|
||||
'@astrojs/compiler':
|
||||
specifier: ^1.4.0
|
||||
version: 1.4.0
|
||||
'@astrojs/prism':
|
||||
specifier: ^2.1.2
|
||||
version: link:../../astro-prism
|
||||
|
|
|
|||
Loading…
Reference in a new issue