erudit 2.0.0-dev.8 → 2.0.0-dev.9

package/app/composables/bitran.ts

@@ -1,132 +1,127 @@
-import {
-    createBitranCore,
-    type GenericProductCore,
-    defaultProductCores,
-} from 'bitran/core';
-import {
-    createBitranRender,
-    createPhrase,
-    type ProductRender,
-    defaultProductRenders,
-} from 'bitran/render';
-
 import eruditConfig from '#erudit/config';
 import bitranConfig from '#erudit/client/bitran';
-import { BitranRenderWrapper } from '#components';
-import type { BitranContext } from '@erudit/shared/bitran/context';
-
-// Erudit Bitran Products
-import { headingName } from '@erudit/shared/bitran/products/heading/shared';
-import { heading as headingCore } from '@erudit/shared/bitran/products/heading/core';
-import { heading as headingRender } from '@erudit/shared/bitran/products/heading/render';
-import { aliasName } from '@erudit/shared/bitran/products/alias/shared';
-import { defineAlias as defineAliasCore } from '@erudit/shared/bitran/products/alias/core';
-import { alias as aliasRender } from '@erudit/shared/bitran/products/alias/render';
-import { includeName } from '@erudit/shared/bitran/products/include/shared';
-import { include as includeCore } from '@erudit/shared/bitran/products/include/core';
-import { include as includeRender } from '@erudit/shared/bitran/products/include/render';
-import { linkName } from '@erudit/shared/bitran/products/link/shared';
-import { link as linkCore } from '@erudit/shared/bitran/products/link/core';
-import { link as linkRender } from '@erudit/shared/bitran/products/link/render';
-
-export async function useBitran(context: BitranContext) {
-    /**
-     * TODO:
-     * Recreating all products every time make create a significant lag on Bitran content change.
-     * Cache products!
-     */
-
-    const formatText = useFormatText();
-
-    const bitranCore = createBitranCore({
-        products: await getProductCores(context),
-    });
 
-    const bitranRender = createBitranRender({
-        formatText,
-        products: await getProductRenders(),
-        RenderWrapper: BitranRenderWrapper,
+import {
+    createPhraseCaller,
+    getDefaultRenderers,
+    getElementIcon,
+    type ElementVueRenderers,
+} from '@bitran-js/renderer-vue';
+import {
+    defineBitranTranspiler,
+    type BitranTranspiler,
+    type ElementTranspilers,
+} from '@bitran-js/transpiler';
+import { aliasesName } from '@erudit-js/bitran-elements/aliases/shared';
+import { aliasesTranspiler } from '@erudit-js/bitran-elements/aliases/transpiler';
+import { headingName } from '@erudit-js/bitran-elements/heading/shared';
+import { headingTranspiler } from '@erudit-js/bitran-elements/heading/transpiler';
+import { includeName } from '@erudit-js/bitran-elements/include/shared';
+import { includeTranspiler } from '@erudit-js/bitran-elements/include/transpiler';
+import { linkName } from '@erudit/shared/bitran/link/shared';
+import { linkTranspiler } from '@erudit/shared/bitran/link/transpiler';
+import { aliasesRenderer } from '@erudit-js/bitran-elements/aliases/renderer';
+import { headingRenderer } from '@erudit-js/bitran-elements/heading/renderer';
+import { includeRenderer } from '@erudit-js/bitran-elements/include/renderer';
+import { linkRenderer } from '@erudit/shared/bitran/link/renderer';
+
+let bitranTranspiler!: BitranTranspiler;
+let bitranRenderers!: ElementVueRenderers;
+
+//
+// Transpiler
+//
+
+export async function useBitranTranspiler() {
+    if (bitranTranspiler) return bitranTranspiler;
+
+    const projectTranspilers = await getProjectTranspilers();
+
+    const defaultTranspilers = {
+        [aliasesName]: aliasesTranspiler,
+        [includeName]: includeTranspiler,
+        [headingName]: headingTranspiler,
+        [linkName]: linkTranspiler,
+    };
+
+    bitranTranspiler = defineBitranTranspiler({
+        ...projectTranspilers,
+        ...defaultTranspilers,
     });
 
-    return {
-        bitranCore,
-        bitranRender,
-    };
+    return bitranTranspiler;
 }
 
-async function getProductCores(context: BitranContext) {
-    const projectProductCores: Record<string, GenericProductCore> = {};
+async function getProjectTranspilers(): Promise<ElementTranspilers> {
+    const bitranElements = bitranConfig.elements;
 
-    for (const [name, definition] of Object.entries(
-        bitranConfig.products || {},
-    )) {
-        projectProductCores[name] = await definition.core();
-    }
+    if (!bitranElements) return {};
 
-    const eruditProductCores: Record<string, GenericProductCore> = {
-        [aliasName]: defineAliasCore(context),
-        [includeName]: includeCore,
-        [headingName]: headingCore,
-        [linkName]: linkCore,
-    };
+    const projectTranspilers: ElementTranspilers = {};
+    for (const [name, bitranElement] of Object.entries(bitranElements))
+        projectTranspilers[name] = await bitranElement.transpiler();
 
-    return {
-        ...projectProductCores,
-        ...eruditProductCores,
-        ...defaultProductCores,
-    };
+    return projectTranspilers;
 }
 
-let productRenders: Record<string, ProductRender>;
-
-async function getProductRenders() {
-    if (productRenders) return productRenders;
+//
+// Renderers
+//
 
-    const projectProductRenders: Record<string, ProductRender> = {};
+export async function useBitranRenderers() {
+    if (bitranRenderers) return bitranRenderers;
 
-    for (const [name, definition] of Object.entries(
-        bitranConfig.products || {},
-    )) {
-        projectProductRenders[name] = await definition.render();
-    }
+    const projectRenderers = await getProjectRenderers();
 
-    const eruditProductRenders: Record<string, ProductRender> = {
-        [aliasName]: aliasRender,
-        [includeName]: includeRender,
-        [headingName]: headingRender,
-        [linkName]: linkRender,
+    const defaultRenderers = {
+        [aliasesName]: aliasesRenderer,
+        [includeName]: includeRenderer,
+        [headingName]: headingRenderer,
+        [linkName]: linkRenderer,
     };
 
-    productRenders = {
-        ...projectProductRenders,
-        ...eruditProductRenders,
-        ...defaultProductRenders,
+    // @ts-ignore
+    bitranRenderers = {
+        ...projectRenderers,
+        ...defaultRenderers,
     };
 
-    return productRenders;
+    return bitranRenderers!;
 }
 
-export async function useBitranProductRender(productName: string) {
-    const productRenders = await getProductRenders();
-    const productRender = productRenders[productName];
+async function getProjectRenderers() {
+    const bitranElements = bitranConfig.elements;
+
+    if (!bitranElements) return {};
+
+    const projectRenderers: ElementVueRenderers = {};
+    for (const [name, bitranElement] of Object.entries(bitranElements))
+        projectRenderers[name] = await bitranElement.renderer();
+
+    return projectRenderers;
+}
+
+//
+// Utils
+//
+
+export async function useBitranElementRenderer(productName: string) {
+    const renderer =
+        (await useBitranRenderers())[productName] ||
+        getDefaultRenderers()[productName];
 
-    if (!productRender)
+    if (!renderer)
         throw new Error(`Missing Bitran product render "${productName}"!`);
 
-    return productRender;
+    return renderer;
 }
 
-export async function useBitranProductIcon(productName: string) {
-    const productRender = await useBitranProductRender(productName);
-    if (productRender.icon) return await productRender.icon();
-    return '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path fill="currentColor" fill-rule="evenodd" d="M448 64v384H64V64zM256 271.085L121.751 405.333h268.497zM106.666 121.751v268.497L240.915 256zm298.667 0L271.085 256l134.248 134.248zm-15.085-15.085H121.751L256 240.915z"/></svg>';
+export async function useBitranElementIcon(productName: string) {
+    const renderer = await useBitranElementRenderer(productName);
+    return await getElementIcon(renderer);
 }
 
-export async function useBitranProductLanguage(productName: string) {
-    const productRender = await useBitranProductRender(productName);
-    return await createPhrase(
-        eruditConfig?.language || 'en',
-        productRender.languages,
-        `erudit:${productName}`,
-    );
+export async function useBitranElementLanguage(productName: string) {
+    const renderer = await useBitranElementRenderer(productName);
+    return await createPhraseCaller(renderer, eruditConfig?.language || 'en');
 }

package/app/composables/bitranContent.ts

@@ -1,5 +1,6 @@
 import type { ShallowRef } from 'vue';
-import type { BitranContent } from 'bitran';
+import type { BitranContent } from '@bitran-js/renderer-vue';
+
 import {
     encodeBitranLocation,
     stringifyBitranLocation,

package/app/composables/contentPage.ts

@@ -1,6 +1,6 @@
 import eruditConfig from '#erudit/config';
 
-import { createOgImageTags, defaultOgImage } from '@app/scripts/og';
+import { createOgImageTags, defaultOgImage } from '../../app/scripts/og';
 import type { ContentData } from '@shared/content/data';
 
 export function useContentPage(contentData: Ref<ContentData>) {

package/app/composables/phrases.ts

@@ -1,80 +1,80 @@
-type PhraseCaller<T extends EruditPhraseId[]> = {
-    [K in T[number]]: EruditPhrases[K];
-};
-
-const payloadKey = 'language';
-
-interface LanguagePayload {
-    strPhrases: Partial<Record<EruditPhraseId, string>>;
-    strFunctions: Record<string, string>;
-}
-
-const functions: Record<string, Function> = {};
-const functionPhrases: Record<string, Function> = {};
-
-const phraseApiRoute = (phraseId: EruditPhraseId) =>
-    `/api/language/phrase/${phraseId}`;
-const functionsApiRoute = '/api/language/functions';
-const phraseIdsApiRoute = '/api/language/phraseIds';
-
-export function usePhrases<T extends EruditPhraseId[]>(
-    ...phraseIds: T
-): Promise<PhraseCaller<T>> {
-    const nuxt = useNuxtApp();
-    const payload: LanguagePayload =
-        (nuxt.static.data[payloadKey] ||=
-        nuxt.payload.data[payloadKey] ||=
-            {});
-
-    const prerenderAllPromise = prerenderAllPhrases();
-    const prepareFunctionsPromise = prepareFunctions(payload);
-
-    return (async () => {
-        await prerenderAllPromise;
-        await prepareFunctionsPromise;
-
-        payload.strPhrases ||= {};
-        const phraseCaller: any = {};
-
-        for (const phraseId of phraseIds) {
-            const apiRoute = phraseApiRoute(phraseId);
-            const strPhrase = (payload.strPhrases[phraseId] ||= (await $fetch(
-                apiRoute,
-            )) as string);
-
-            if (strPhrase.startsWith('~!~FUNC~!~')) {
-                const strFunction = strPhrase.replace('~!~FUNC~!~', '');
-                functionPhrases[phraseId] ||= new Function(strFunction).bind(
-                    functions,
-                )();
-                phraseCaller[phraseId] = functionPhrases[phraseId];
-            } else {
-                phraseCaller[phraseId] = strPhrase;
-            }
-        }
-
-        return phraseCaller as PhraseCaller<T>;
-    })();
-}
-
-async function prerenderAllPhrases() {
-    if (import.meta.dev) return;
-
-    if (import.meta.client) return;
-
-    const nuxt = useNuxtApp();
-
-    const phraseIds = await $fetch(phraseIdsApiRoute);
-    nuxt.runWithContext(() =>
-        prerenderRoutes(phraseIds.map((phraseId) => phraseApiRoute(phraseId))),
-    );
-}
-
-async function prepareFunctions(payload: LanguagePayload) {
-    if (payload?.strFunctions) return;
-
-    payload.strFunctions = await $fetch(functionsApiRoute);
-
-    for (const [funcName, strFunc] of Object.entries(payload.strFunctions))
-        functions[funcName] = new Function(strFunc)();
-}
+type PhraseCaller<T extends EruditPhraseId[]> = {
+    [K in T[number]]: EruditPhrases[K];
+};
+
+const payloadKey = 'language';
+
+interface LanguagePayload {
+    strPhrases: Partial<Record<EruditPhraseId, string>>;
+    strFunctions: Record<string, string>;
+}
+
+const functions: Record<string, Function> = {};
+const functionPhrases: Record<string, Function> = {};
+
+const phraseApiRoute = (phraseId: EruditPhraseId) =>
+    `/api/language/phrase/${phraseId}`;
+const functionsApiRoute = '/api/language/functions';
+const phraseIdsApiRoute = '/api/language/phraseIds';
+
+export function usePhrases<T extends EruditPhraseId[]>(
+    ...phraseIds: T
+): Promise<PhraseCaller<T>> {
+    const nuxt = useNuxtApp();
+    const payload: LanguagePayload =
+        (nuxt.static.data[payloadKey] ||=
+        nuxt.payload.data[payloadKey] ||=
+            {});
+
+    const prerenderAllPromise = prerenderAllPhrases();
+    const prepareFunctionsPromise = prepareFunctions(payload);
+
+    return (async () => {
+        await prerenderAllPromise;
+        await prepareFunctionsPromise;
+
+        payload.strPhrases ||= {};
+        const phraseCaller: any = {};
+
+        for (const phraseId of phraseIds) {
+            const apiRoute = phraseApiRoute(phraseId);
+            const strPhrase = (payload.strPhrases[phraseId] ||= (await $fetch(
+                apiRoute,
+            )) as string);
+
+            if (strPhrase.startsWith('~!~FUNC~!~')) {
+                const strFunction = strPhrase.replace('~!~FUNC~!~', '');
+                functionPhrases[phraseId] ||= new Function(strFunction).bind(
+                    functions,
+                )();
+                phraseCaller[phraseId] = functionPhrases[phraseId];
+            } else {
+                phraseCaller[phraseId] = strPhrase;
+            }
+        }
+
+        return phraseCaller as PhraseCaller<T>;
+    })();
+}
+
+async function prerenderAllPhrases() {
+    if (import.meta.dev) return;
+
+    if (import.meta.client) return;
+
+    const nuxt = useNuxtApp();
+
+    const phraseIds = await $fetch(phraseIdsApiRoute);
+    nuxt.runWithContext(() =>
+        prerenderRoutes(phraseIds.map((phraseId) => phraseApiRoute(phraseId))),
+    );
+}
+
+async function prepareFunctions(payload: LanguagePayload) {
+    if (payload?.strFunctions) return;
+
+    payload.strFunctions = await $fetch(functionsApiRoute);
+
+    for (const [funcName, strFunc] of Object.entries(payload.strFunctions))
+        functions[funcName] = new Function(strFunc)();
+}

package/app/pages/_test/preview.vue

@@ -1,110 +1,110 @@
-<script lang="ts" setup>
-import { PreviewDataType } from '@app/scripts/preview/data';
-import { createPreviewError } from '@app/scripts/preview/data/alert';
-import { PreviewRequestType } from '@app/scripts/preview/request';
-import {
-    PreviewThemeName,
-    showPreview,
-    togglePreview,
-} from '@app/scripts/preview/state';
-
-function showCustom() {
-    showPreview({
-        type: PreviewRequestType.Data,
-        data: {
-            type: PreviewDataType.Custom,
-            message: 'This is custom message for preview!',
-            footer: {
-                //iconName: 'arrow-left',
-                iconSvg:
-                    '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.42436 0H9.57565L14.995 16H11.8276L10.8115 13H5.18855L4.17242 16H1.005L6.42436 0ZM6.20468 10H9.79533L8 4.69952L6.20468 10Z"></path> </g></svg>',
-                secondary: 'Secondary raw text',
-                primary: 'Primary raw text',
-                href: 'https://google.com',
-            },
-        },
-    });
-}
-
-function showAlert(theme: PreviewThemeName) {
-    showPreview({
-        type: PreviewRequestType.Data,
-        data: createPreviewError({
-            theme,
-            message: 'This is message!',
-            title: 'Custom Title',
-            pre: JSON.stringify(
-                {
-                    foo: 1337,
-                    bar: 'Some text',
-                },
-                null,
-                4,
-            ),
-        }),
-    });
-}
-</script>
-
-<template>
-    <button @click="() => togglePreview()">Toggle Preview</button>
-    <div>
-        Show:
-        <br />
-        <button :class="$style.button" @click="showCustom">Custom</button>
-        <br />
-        <button
-            :class="$style.button"
-            v-for="theme in PreviewThemeName"
-            @click="() => showAlert(theme)"
-        >
-            Alert {{ theme }}
-        </button>
-        <br />
-        <button
-            :class="$style.button"
-            @click="
-                showPreview({
-                    type: PreviewRequestType.MissingElement,
-                    elementId: 'foo-id',
-                })
-            "
-        >
-            Missing element
-        </button>
-        <button
-            :class="$style.button"
-            @click="
-                showPreview({
-                    type: PreviewRequestType.MissingElement,
-                    elementId: 'foo-id',
-                    hashMismatch: { current: 'bar', expected: 'baz' },
-                })
-            "
-        >
-            Missing element + hash mismatch
-        </button>
-        <br />
-        <button
-            :class="$style.button"
-            @click="
-                showPreview({
-                    type: PreviewRequestType.HashMismatch,
-                    currentHash: 'foo',
-                    expectedHash: 'bar',
-                })
-            "
-        >
-            Hash mismatch
-        </button>
-    </div>
-</template>
-
-<style lang="scss" module>
-.button {
-    border: 2px solid var(--border);
-    border-radius: 3px;
-    padding: 3px;
-    margin: 3px;
-}
-</style>
+<script lang="ts" setup>
+import { PreviewDataType } from '../../../app/scripts/preview/data';
+import { createPreviewError } from '../../../app/scripts/preview/data/alert';
+import { PreviewRequestType } from '../../../app/scripts/preview/request';
+import {
+    PreviewThemeName,
+    showPreview,
+    togglePreview,
+} from '../../../app/scripts/preview/state';
+
+function showCustom() {
+    showPreview({
+        type: PreviewRequestType.Data,
+        data: {
+            type: PreviewDataType.Custom,
+            message: 'This is custom message for preview!',
+            footer: {
+                //iconName: 'arrow-left',
+                iconSvg:
+                    '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.42436 0H9.57565L14.995 16H11.8276L10.8115 13H5.18855L4.17242 16H1.005L6.42436 0ZM6.20468 10H9.79533L8 4.69952L6.20468 10Z"></path> </g></svg>',
+                secondary: 'Secondary raw text',
+                primary: 'Primary raw text',
+                href: 'https://google.com',
+            },
+        },
+    });
+}
+
+function showAlert(theme: PreviewThemeName) {
+    showPreview({
+        type: PreviewRequestType.Data,
+        data: createPreviewError({
+            theme,
+            message: 'This is message!',
+            title: 'Custom Title',
+            pre: JSON.stringify(
+                {
+                    foo: 1337,
+                    bar: 'Some text',
+                },
+                null,
+                4,
+            ),
+        }),
+    });
+}
+</script>
+
+<template>
+    <button @click="() => togglePreview()">Toggle Preview</button>
+    <div>
+        Show:
+        <br />
+        <button :class="$style.button" @click="showCustom">Custom</button>
+        <br />
+        <button
+            :class="$style.button"
+            v-for="theme in PreviewThemeName"
+            @click="() => showAlert(theme)"
+        >
+            Alert {{ theme }}
+        </button>
+        <br />
+        <button
+            :class="$style.button"
+            @click="
+                showPreview({
+                    type: PreviewRequestType.MissingElement,
+                    elementId: 'foo-id',
+                })
+            "
+        >
+            Missing element
+        </button>
+        <button
+            :class="$style.button"
+            @click="
+                showPreview({
+                    type: PreviewRequestType.MissingElement,
+                    elementId: 'foo-id',
+                    hashMismatch: { current: 'bar', expected: 'baz' },
+                })
+            "
+        >
+            Missing element + hash mismatch
+        </button>
+        <br />
+        <button
+            :class="$style.button"
+            @click="
+                showPreview({
+                    type: PreviewRequestType.HashMismatch,
+                    currentHash: 'foo',
+                    expectedHash: 'bar',
+                })
+            "
+        >
+            Hash mismatch
+        </button>
+    </div>
+</template>
+
+<style lang="scss" module>
+.button {
+    border: 2px solid var(--border);
+    border-radius: 3px;
+    padding: 3px;
+    margin: 3px;
+}
+</style>

package/app/pages/article/[...articleId].vue

@@ -1,3 +1,3 @@
-<template>
-    <MainTopic />
+<template>
+    <MainTopic />
 </template>