wovn-nextjs 0.0.4

package/README.md

@@ -0,0 +1 @@
+# Wovn Next.js plugin

package/bin/wovn-nextjs

@@ -0,0 +1,422 @@
+#!/usr/bin/env node
+'use strict';
+
+const path = require('node:path')
+const https = require('node:https')
+const fs = require('node:fs')
+const fsp = fs.promises
+const parse = require('typescript-eslint').parser.parseForESLint
+
+const command = process.argv[2]
+const options = process.argv.slice(3)
+const targetRegexp = /\.(?:jsx|tsx)$/
+const ignoreRegexp = /^\..*|node_modules$/
+const buildDir = options[0] || '.'
+const parseOption = {
+    ecmaFeatures: {
+        jsx: true,
+    },
+    sourceType: 'module'
+}
+
+async function main() {
+    const context = {
+        uvs: new Map(), // insertion order is expected for wovn-nextjs.test.js
+        pathname: '',
+        components: [],
+        wovnJsData: {},
+        projectToken: process.env.WOVN_PROJECT_TOKEN,
+        hostname: process.env.WOVN_HOSTNAME
+    }
+    if (command === 'build' && context.projectToken && context.hostname) {
+        context.wovnJsData = await httpsRequest(`https://data.wovn.io/js_data/json/1/${context.projectToken}/?u=http%3A%2F%2F${context.hostname}`).then(body => JSON.parse(body.toString()))
+        await overwriteTsxAndJsxFiles(context, undo) // Make sure to collect translatable texts
+        await overwriteTsxAndJsxFiles(context, transform).then(() => reportToWovn(context))
+        await undoIndexJavaScriptFiles()
+        await overwriteInitializationProcess(context)
+        await createMiddlewareFile(context)
+        if (process.env.WOVN_DEBUG) {
+            console.dir(context, {depth: null})
+        }
+    } else if (command === 'build-config' && context.projectToken && context.hostname) {
+        context.wovnJsData = await httpsRequest(`https://data.wovn.io/js_data/json/1/${context.projectToken}/?u=http%3A%2F%2F${context.hostname}`).then(body => JSON.parse(body.toString()))
+        await undoIndexJavaScriptFiles()
+        await overwriteInitializationProcess(context)
+        await createMiddlewareFile(context)
+        if (process.env.WOVN_DEBUG) {
+            console.dir(context, {depth: null})
+        }
+    } else if (command === 'undo') {
+        await overwriteTsxAndJsxFiles(context, undo)
+        await undoIndexJavaScriptFiles()
+        await unlinkMiddlewareFileSafely()
+    } else {
+        console .log(`Usage:
+  WOVN_PROJECT_TOKEN=<token> WOVN_HOSTNAME=<host> wovn-nextjs build   overwrite jsx and tsx files
+  wovn-nextjs undo                                                    restore overwritten jsx and tsx files`)
+    }
+}
+
+if (require.main === module) {
+    main()
+} else {
+    module.exports = { transform, toReport, undo }
+}
+
+// the following are helper functions
+
+const singleContentTags = new Set('title'.split(' '))
+const inlineTags = new Set('a abbr b bdi bdo button cite code data dfn em i kbd label legend mark meter q rb rp rt rtc ruby s samp small span strong sub sup time u var'.split(' ')) // option tag as a blcok
+const voidElementTags = new Set('area base br col embed hr img input link meta param source track wbr'.split(' '))
+function transform(context, source) {
+    const tokens = parse(source, parseOption).ast.tokens
+    const component = {
+        pathname: context.pathname,
+        uvs: new Set(),
+        attributes: []
+    }
+    let prev = { type: '', value: '' }
+    let prev2 = { type: '', value: '' }
+    let tag = ''
+    let currentLevel = 0
+    let startedLevel = 0
+    function normalizeText(s) {
+        return s.replace(/[\n \t\u0020\u0009\u000C\u200B\u000D\u000A]+/g, ' ').replace(/^[\s\u00A0\uFEFF\u1680\u180E\u2000-\u200A\u202F\u205F\u3000]+|[\s\u00A0\uFEFF\u1680\u180E\u2000-\u200A\u202F\u205F\u3000]+$/g, '')
+    }
+    function reportAttribute(attr, s) {
+        component.attributes.push({tag, attr, value: normalizeText(s)})
+    }
+
+    // Scrape translatable texts from tokens
+    const groups = [[]]
+    const len = tokens.length
+    for (let i=0; i<len; i++) {
+        const token = tokens[i]
+        const isTagName = token.type === 'JSXIdentifier' || (token.type === 'Keyword' && token.value === 'var')
+        if (prev.type === 'Punctuator' && prev.value === '<' && isTagName) {
+            tag = token.value
+            const headPos = i - 1
+            const attrs = {}
+            for (i++; i<len; i++) {
+                // Scrape attributes in the tag
+                const t = tokens[i]
+                if (t.type === 'Punctuator' && t.value === '>') {
+                    break
+                } else if (t.type === 'JSXText' && t.value.trim().length && prev.type === 'Punctuator' && prev.value === '=') {
+                    const value = t.value.slice(1, -1) // Strip leading and trailing double quotes
+                    if(isTranslatableAttribute(tag, prev2.value, attrs)) {
+                        if (prev2.value === 'srcset') {
+                            for (const src of value.split(',')) {
+                                reportAttribute(prev2.value, src.trim().split(' ')[0])
+                            }
+                        } else {
+                            reportAttribute(prev2.value, value)
+                        }
+                        if (value.length) {
+                            t.wovnCode = `{ wovnInternalT(${ JSON.stringify(value) }) }`
+                        }
+                    }
+                    attrs[prev2.value] = value
+                }
+                prev2 = prev
+                prev = t
+            }
+            const isSelfClosing = prev.type === 'Punctuator' && prev.value === '/' && tokens[i].type === 'Punctuator' && tokens[i].value === '>'
+            currentLevel += isSelfClosing ? 0: 1
+            if (inlineTags.has(tag)) {
+                startedLevel = startedLevel === 0 ? currentLevel : startedLevel
+                groups.at(-1).push({value: `<${tag}>`, headPos})
+            } else if (voidElementTags.has(tag)) {
+                groups.at(-1).push({value: `<${tag}>`})
+            } else {
+                if (startedLevel) {
+                    groups.push([])
+                }
+                startedLevel = 0
+            }
+        } else if (prev.type === 'Punctuator' && prev.value === '/' && isTagName) {
+            if (startedLevel) {
+                groups.at(-1).push({value: `</${token.value}>`, headPos: i - 2, tailPos: i + 1})
+            }
+            if (startedLevel === currentLevel) {
+                groups.push([])
+                startedLevel = 0
+            }
+            currentLevel--
+            tag = ''
+        } else if (token.type === 'JSXText') {
+            if (prev.value === '=') {
+                // the `token` could be value of attribute
+                continue
+            }
+            if (startedLevel === 0) {
+                if (token.value.trim().length) {
+                    if (singleContentTags.has(tag)) {
+                        token.wovnCode = `{ wovnInternalT(${ JSON.stringify(token.value) }) }`
+                    } else {
+                        groups.at(-1).push(token)
+                        groups.push([])
+                    }
+                }
+            } else {
+                groups.at(-1).push(token)
+            }
+        }
+        prev2 = prev
+        prev = token
+    }
+
+    // Set wovnCode for each token to modify the tsx or jsx file
+    function internalComponent(major, minor, source) {
+        return `<WovnInternalComponent major={${ major }} minor={${ minor }} source={${ JSON.stringify(source) }} />`
+    }
+
+    for (const group of groups.filter(tokens => tokens.some(t => t.type === 'JSXText' && t.value.trim().length))) {
+        const normalizedUv = group.map(token => token.value.startsWith('<') ? token.value : normalizeText(token.value)).join('')
+        const major = context.uvs.has(normalizedUv) ? context.uvs.get(normalizedUv) : context.uvs.size
+        let minor = 0
+        context.uvs.set(normalizedUv, major)
+        component.uvs.add(normalizedUv)
+        let isPrevTag = false
+        if ('headPos' in group[0]) {
+            tokens[group[0].headPos].wovnCode = '<>{/* wovn-nextjs-command */}' + internalComponent(major, minor++, '') + tokens[group[0].headPos].value
+        }
+        for (const token of group) {
+            if (token.value.startsWith('<')) {
+                if (isPrevTag && token.headPos) {
+                    tokens[token.headPos].wovnCode = internalComponent(major, minor++, '') + tokens[token.headPos].value
+                }
+                isPrevTag = true
+            } else {
+                token.wovnCode = internalComponent(major, minor++, token.value)
+                isPrevTag = false
+            }
+        }
+        if ('tailPos' in group.at(-1)) {
+            tokens[group.at(-1).tailPos].wovnCode = tokens[group.at(-1).tailPos].value + internalComponent(major, minor++, '') + '{/* wovn-nextjs-command */}</>'
+        }
+    }
+
+    // Return modified code
+    let pos = 0
+    let code = ''
+    let isModified = false
+    for (const token of tokens) {
+        isModified ||= !!token.wovnCode
+        code += token.wovnCode || source.slice(pos, token.range[1])
+        pos = token.range[1]
+    }
+    code += source.match(/\s*$/)[0] // Keep white spaces at tail
+    if (isModified) {
+        const importer = 'import { WovnInternalComponent, wovnInternalT } from "wovn-nextjs" // wovn-nextjs-command-appended\n'
+        code = code.replaceAll(/^(import Link from ["'`]next\/link.*)/mg, 'import { Link } from "wovn-nextjs" //$1 wovn-nextjs-command-comment')
+        code = code.replaceAll(/^(import { *useRouter *} from ["'`]next\/router.*)/mg, 'import { usePageRouter as useRouter } from "wovn-nextjs" //$1 wovn-nextjs-command-comment')
+        code = code.replaceAll(/^(import { *useRouter *} from ["'`]next\/navigation.*)/mg, 'import { useAppRouter as useRouter } from "wovn-nextjs" //$1 wovn-nextjs-command-comment')
+        code = code.match(/^['"]use /) ? code.replace(/\n/, '\n' + importer) : importer + code
+    }
+    context.components.push(component)
+    return code
+}
+
+function undo(context, code) {
+    code = code.replaceAll(/^import [^\n]* from "wovn-nextjs" \/\/ wovn-nextjs-command-appended\n/mg, '')
+    code = code.replaceAll(/^(?:.*?)\/\/(.*?) wovn-nextjs-command-comment$/mg, '$1')
+    code = code.replaceAll(/(?:<>\{\/\* wovn-nextjs-command \*\/\})?<WovnInternalComponent major={[0-9.]*} minor={[0-9.]*} source={(".*?")} \/>(?:\{\/\* wovn-nextjs-command \*\/\}<\/>)?/g, (...m) => JSON.parse(m[1]))
+    code = code.replaceAll(/=\s*{ wovnInternalT\((".+")\) }/g, (...m) => '="' + JSON.parse(m[1]) + '"') // for attribute
+    code = code.replaceAll(/{ wovnInternalT\((".+")\) }/g, (...m) => JSON.parse(m[1])) // for single contet tag like <title>
+    return code
+}
+
+const appendMarker = '\n// wovn-nextjs-command-appended'
+
+async function overwriteInitializationProcess(context) {
+    const sourceLanguage = context.wovnJsData.language
+    const targetLanguages = context.wovnJsData.convert_langs?.map(({code}) => code).filter(l => l !== sourceLanguage)
+    const extraCode = `${appendMarker}
+state.projectToken = ${ JSON.stringify(context.projectToken) }
+state.sources = ${ JSON.stringify([...context.uvs.keys()]) }
+wovnMiddlewareConfig.matcher = ${ JSON.stringify(targetLanguages.map(language => '/' + language + '/:path*')) } 
+setTranslations(${ JSON.stringify(context.wovnJsData) })`
+    await overwriteIndexJavaScriptFiles(code => code.split(appendMarker)[0] + extraCode)
+}
+
+async function undoIndexJavaScriptFiles() {
+    await overwriteIndexJavaScriptFiles(code => code.split(appendMarker)[0])
+}
+
+async function overwriteIndexJavaScriptFiles(convert) {
+    const promises = []
+    for (const dir of ['cjs', 'esm']) {
+        const filepath = path.join(__dirname, '..', 'dist', dir, 'index.js')
+        const source = await fsp.readFile(filepath, 'utf-8')
+        const convertedSource = convert(source)
+        if (source !== convertedSource) {
+            promises.push(fsp.writeFile(filepath, convertedSource))
+        }
+    }
+    return Promise.all(promises)
+}
+
+async function overwriteTsxAndJsxFiles(context, convert) {
+    async function* targetFiles(dir) {
+        const dirents = await fsp.readdir(dir, { withFileTypes: true });
+        for (const dirent of dirents) {
+            const res = path.resolve(dir, dirent.name);
+            if (dirent.isDirectory()) {
+                if (!ignoreRegexp.test(dirent.name)) {
+                    yield* targetFiles(res);
+                }
+            } else if (targetRegexp.test(dirent.name)) {
+                yield res;
+            }
+        }
+    }
+    const promises = []
+    const pwd = process.env.PWD
+    for await (const pathname of targetFiles(buildDir)) {
+        context.pathname = pathname.slice(pwd.length + buildDir.length)
+        const source = await fsp.readFile(pathname, 'utf-8')
+        const convertedSource = convert(context, source)
+        if (source !== convertedSource) {
+            promises.push(fsp.writeFile(pathname, convertedSource))
+        }
+    }
+    return Promise.all(promises)
+}
+
+async function reportToWovn(context) {
+    function toBody(context, id, uvs, attributes) {
+        const form = []
+        for (const [k, v] of Object.entries(toReport(context, id, uvs, attributes))) {
+            form.push(`${ encodeURIComponent(k) }=${ encodeURIComponent(typeof v === 'object' ? JSON.stringify(v) : v) }`)
+        }
+        return form.join('&')
+    }
+    await httpsRequest(`https://ee.wovn.io/report_values/${ encodeURIComponent(context.projectToken) }`, 'post', toBody(context, context.wovnJsData.id, context.uvs, context.components.flatMap(c => c.attributes)))
+    for (const component of context.components) {
+        const { id } = await httpsRequest(`https://data.wovn.io/js_data/json/1/${context.projectToken}/?u=http%3A%2F%2F${ encodeURIComponent(context.hostname + '/' + component.pathname ) }`).then(body => JSON.parse(body.toString()))
+        await httpsRequest(`https://ee.wovn.io/report_values/${ encodeURIComponent(context.projectToken) }`, 'post', toBody(context, id, component.uvs, component.attributes))
+    }
+}
+
+function httpsRequest(url, method='get', body='') {
+    return new Promise((resolve, reject) => {
+        try {
+            const req = https.request(url, { method }, res => {
+                if (res.statusCode >= 200 && res.statusCode < 300) {
+                    const chunks = []
+                    res.on('data', chunk => chunks.push(chunk))
+                    res.on('end', () => resolve(Buffer.concat(chunks)))
+                } else {
+                    reject(new Error(`${url} returns ${res.statusCode}`))
+                }
+            })
+            req.on('error', reject)
+            body.length > 0 && req.write(body)
+            req.end()
+        } catch (e) {
+            reject(e)
+        }
+    })
+}
+
+function toReport(context, pageId, uvs, attributes) {
+    return {
+        page_id: pageId,
+        url: `http://${context.hostname}`,
+        no_record_vals: [...uvs.keys()].map(src => ({
+            src,
+            xpath: '/html/body/text()',
+            unified: true,
+            exists: true,
+            scrape_number: 0
+        })).concat(attributes.map(a => ({
+            src: a.value,
+            xpath: `/html/body/${a.tag}[@${a.attr}]`,
+            unified: false,
+            exists: true,
+            scrape_number: 0
+        }))),
+        links: [],
+        diagnostics: {},
+        report_count: 1,
+        source: 'custom',
+        page_metadata: {}
+    }
+}
+
+const attributes = {
+    option: ['label'],
+    a: ['title'],
+    optgroup: ['label'],
+    img: ['alt', 'srcset', 'src'],
+    textarea: ['placeholder'],
+    source: ['srcset']
+}
+const inputAttributes = {
+    search: ['value', 'placeholder'],
+    button: ['value', 'placeholder', 'data-confirm'],
+    submit: ['value', 'placeholder', 'data-confirm'],
+    image: ['src', 'alt', 'placeholder', 'data-confirm'],
+    reset: ['value']
+}
+const metaNameAttributes = new Set([
+    'description',
+    'title',
+    'og:description',
+    'og:title',
+    'twitter:description',
+    'twitter:title'
+])
+const metaPropertyAttributes = new Set([
+    'og:description',
+    'og:title',
+    'og:site_name',
+    'twitter:description',
+    'twitter:title'
+])
+function isTranslatableAttribute(tag, attr, attrs) {
+    if (tag === 'meta' && (metaNameAttributes.has(attr) || (attr === 'content' && (metaNameAttributes.has(attrs.name) || metaPropertyAttributes.has(attrs.property))))) {
+        return true
+    }
+    const targets = tag === 'input' ? inputAttributes[attrs.type] : attributes[tag]
+    return targets && targets.includes(attr)
+}
+
+const middlewarePath = path.join(buildDir, 'middleware.js')
+const targetMiddlewarePaths = ['', 'src'].flatMap(dir => ['.js', '.ts'].flatMap(ext => path.join(buildDir, dir, 'middleware' + ext)))
+
+async function canMiddlewareDelete() {
+    try {
+        return (await fsp.readFile(middlewarePath, 'utf-8')).startsWith('// wovn-nextjs-command-appended')
+    } catch (e) {
+        if (e.message.startsWith('ENOENT:')) {
+            return true
+        } else {
+            throw e
+        }
+    }
+}
+
+async function createMiddlewareFile(context) {
+    const found = targetMiddlewarePaths.find(pathname => fs.existsSync(pathname))
+    if (found && found !== middlewarePath) {
+        return
+    }
+    if (await canMiddlewareDelete(middlewarePath)) {
+        await fsp.writeFile(middlewarePath, `// wovn-nextjs-command-appended
+import { wovnMiddleware as middleware, wovnMiddlewareConfig as config } from 'wovn-nextjs';
+export { middleware, config }
+`)
+    }
+}
+
+async function unlinkMiddlewareFileSafely() {
+    if (await canMiddlewareDelete(middlewarePath)) {
+        try {
+            await fsp.unlink(middlewarePath)
+        } catch {
+            // ignore the error
+        }
+    }
+}

package/dist/cjs/index.d.ts

@@ -0,0 +1,62 @@
+import type { UrlObject } from "url";
+import { type MiddlewareConfig, NextRequest, NextResponse } from "next/server";
+import { AppContext, AppProps } from "next/app";
+import * as React from "react";
+import { NextRouter } from "next/router";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+export declare function t(source: string): string;
+export declare function currentLanguage(): string;
+export declare function useTranslation(): {
+    t: typeof t;
+    i18n: {
+        changeLanguage(language: string): void;
+    };
+};
+export declare const Link: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof {
+    href: string | UrlObject;
+    as?: string | UrlObject;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onMouseEnter?: any;
+    onTouchStart?: any;
+    onClick?: any;
+}> & {
+    href: string | UrlObject;
+    as?: string | UrlObject;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onMouseEnter?: any;
+    onTouchStart?: any;
+    onClick?: any;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export declare function usePageRouter(): NextRouter;
+export declare function useAppRouter(): AppRouterInstance;
+declare const wovnMiddlewareConfig: MiddlewareConfig & {
+    matcher: string[];
+};
+export { wovnMiddlewareConfig };
+export declare function wovnMiddleware(request: NextRequest): NextResponse<unknown>;
+export declare function appWithWovn(TargetComponent: React.FunctionComponent<any> | React.ComponentClass<any, any>): {
+    (props: AppProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    getInitialProps(appContext: AppContext): Promise<{
+        pageProps: any;
+    }>;
+};
+export declare function WovnInternalComponent({ major, minor, source }: {
+    major: number;
+    minor: number;
+    source: string;
+}): string;
+export declare function wovnInternalT(source: string): string;

package/dist/cjs/index.js

@@ -0,0 +1,267 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wovnMiddlewareConfig = exports.Link = void 0;
+exports.t = t;
+exports.currentLanguage = currentLanguage;
+exports.useTranslation = useTranslation;
+exports.usePageRouter = usePageRouter;
+exports.useAppRouter = useAppRouter;
+exports.wovnMiddleware = wovnMiddleware;
+exports.appWithWovn = appWithWovn;
+exports.WovnInternalComponent = WovnInternalComponent;
+exports.wovnInternalT = wovnInternalT;
+const server_1 = require("next/server");
+const app_1 = require("next/app");
+const React = require("react");
+const link_1 = require("next/link");
+const server_2 = require("./server");
+const format_url_1 = require("next/dist/shared/lib/router/utils/format-url");
+const router_1 = require("next/router");
+const navigation_1 = require("next/navigation");
+function t(source) {
+    return wovnInternalT(source);
+}
+function currentLanguage() {
+    if (typeof window === 'undefined') {
+        return getLanguageInServer() || state.sourceLanguage;
+    }
+    else {
+        const p = location.pathname;
+        return state.languages.find(language => p === `/${language}` || p.startsWith(`/${language}/`)) || state.sourceLanguage;
+    }
+}
+function useTranslation() {
+    const pageRouter = usePageRouter();
+    const appRouter = useAppRouter();
+    const router = pageRouter || appRouter;
+    return {
+        t,
+        i18n: { changeLanguage(language) {
+                const href = link(undefined, language);
+                log('changeLanguage', language, href);
+                console.log(pageRouter, appRouter);
+                router.push(href);
+            }
+        }
+    };
+}
+function link(href, locale) {
+    const newPathname = linkImpl(href, locale);
+    log('link', locale, href, ' -> ', newPathname);
+    return newPathname;
+}
+function linkImpl(href, locale) {
+    const language = currentLanguage();
+    const pathnameWithoutLanguage = typeof window === 'undefined' ? getPathWithoutLanguage() : language === state.sourceLanguage ? location.pathname : location.pathname.slice(language.length + 1);
+    let targetHref = '';
+    if (typeof href === 'string') {
+        if (/^https?:\.\./.test(href)) {
+            return href;
+        }
+        if (!locale && state.languages.find(language => href === `/${language}` || href.startsWith(`/${language}/`))) {
+            return href;
+        }
+        targetHref = href;
+    }
+    else if (typeof href === 'object') {
+        targetHref = href.pathname || '';
+    }
+    else {
+        targetHref = pathnameWithoutLanguage;
+    }
+    const absPathnameWithoutLanguage = new URL(targetHref, 'http://wovn.io' + pathnameWithoutLanguage).pathname;
+    const targetLanguage = locale || language;
+    const newPathname = (targetLanguage === state.sourceLanguage ? '' : '/' + targetLanguage) + absPathnameWithoutLanguage;
+    if (typeof href === 'object') {
+        return (0, format_url_1.formatUrl)({ ...href, pathname: newPathname });
+    }
+    else {
+        return newPathname;
+    }
+}
+exports.Link = React.forwardRef(function LinkComponent(props, ref) {
+    fetchJsonDataIfNeeded();
+    const newProps = { ...props, ref, locale: undefined, href: link(props.href, props.locale) };
+    return React.createElement(link_1.default, newProps, props.children);
+});
+function usePageRouter() {
+    const target = (0, router_1.useRouter)();
+    return new Proxy(target, {
+        get(target, prop, receiver) {
+            switch (prop) {
+                case 'push':
+                    return (url, as, options) => target.push(link(url), as ? link(as) : as, options);
+                case 'replace':
+                    return (url, as, options) => target.replace(link(url), as ? link(as) : as, options);
+                case 'prefetch':
+                    return (url, asPath, options) => target.prefetch(link(url), asPath ? link(asPath) : asPath, options);
+                default:
+                    return Reflect.get(target, prop, receiver);
+            }
+        }
+    });
+}
+function useAppRouter() {
+    return new Proxy((0, navigation_1.useRouter)(), {
+        get(target, prop, receiver) {
+            switch (prop) {
+                case 'push':
+                    return (url, options) => target.push(link(url), options);
+                case 'replace':
+                    return (url, options) => target.replace(link(url), options);
+                case 'prefetch':
+                    return (url) => target.prefetch(link(url));
+                default:
+                    return Reflect.get(target, prop, receiver);
+            }
+        }
+    });
+}
+const wovnMiddlewareConfig = { matcher: [] }; // this values will be override by wovn-nextjs build command
+exports.wovnMiddlewareConfig = wovnMiddlewareConfig;
+function wovnMiddleware(request) {
+    return rewritePath(state.languages.filter(l => l !== state.sourceLanguage), request);
+}
+function appWithWovn(TargetComponent) {
+    function AppWithWovn(props) {
+        wovnAsyncLocalStorage.enterWith(props.pageProps.wovn);
+        return React.createElement(TargetComponent, props);
+    }
+    AppWithWovn.getInitialProps = async (appContext) => {
+        const appProps = await app_1.default.getInitialProps(appContext);
+        const headers = appContext.ctx.req?.headers || {};
+        return {
+            ...appProps,
+            pageProps: {
+                ...appProps.pageProps,
+                wovn: {
+                    'x-wovn-nextjs-language': headers['x-wovn-nextjs-language'] || '',
+                    'x-wovn-nextjs-path-without-language': headers['x-wovn-nextjs-path-without-language'] || ''
+                }
+            }
+        };
+    };
+    return AppWithWovn;
+}
+// the followings are exported but for internal purpose
+function WovnInternalComponent({ major, minor, source }) {
+    const text = state.translations[currentLanguage()]?.[major]?.[minor] ?? unescapeHtml(source);
+    log("internal component", major, minor, state.translations[currentLanguage()]?.[major]?.[minor], '  <-  ', source);
+    fetchJsonDataIfNeeded();
+    return text;
+}
+function wovnInternalT(source) {
+    fetchJsonDataIfNeeded();
+    return translate(source);
+}
+// the followings are helper functions
+function unescapeHtml(s) {
+    return s.replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#039;/g, "'");
+}
+function fetchJsonDataIfNeeded() {
+    if (typeof window === 'undefined') {
+        return; // do nothing when calling by server component
+    }
+    if (!state.projectToken.length) {
+        return;
+    }
+    if (!state.fetched) {
+        window.wovnnextjs = { state, t, currentLanguage };
+        state.fetched = true;
+        fetch(`https://wovn.global.ssl.fastly.net/js_data/json/1/${encodeURIComponent(state.projectToken)}?u=` + encodeURIComponent(`${location.protocol}//${location.hostname}`)).then(res => {
+            if (res.status === 200) {
+                res.json().then(setTranslations);
+            }
+        });
+    }
+}
+function translate(source) {
+    const language = currentLanguage();
+    const key = source.replace(/ \/>/g, '>').replace(/ +</g, '<').replace(/> +/g, '>').replace(/  +/g, ' ');
+    log('try to translate', language, key, state.rawTranslations?.[key]?.[language]?.[0]?.data);
+    if (language === state.sourceLanguage) {
+        return source;
+    }
+    const translation = state.rawTranslations?.[key]?.[language]?.[0]?.data;
+    return translation || source;
+}
+const wovnAsyncLocalStorage = typeof window === 'undefined' ? new global.AsyncLocalStorage() : {
+    enterWith(_) { },
+    getStore() { return null; }
+};
+function get(key) {
+    if (typeof window === 'undefined') {
+        try {
+            const s = wovnAsyncLocalStorage.getStore();
+            return s ? s[key] : (0, server_2.headers)().get(key);
+        }
+        catch (e) {
+            return e instanceof Error ? `(${e.message})` : '';
+        }
+    }
+    else {
+        throw new Error('This function should not be called in client');
+    }
+}
+function getLanguageInServer() { return get('x-wovn-nextjs-language'); }
+function getPathWithoutLanguage() { return get('x-wovn-nextjs-path-without-language'); }
+function rewritePath(targetLanguages, request) {
+    if (request.nextUrl.pathname.startsWith('/_next') || request.nextUrl.pathname.startsWith('/favicon')) {
+        return server_1.NextResponse.next();
+    }
+    for (const language of targetLanguages) {
+        const url = new URL(request.url);
+        if (url.pathname === '/' + language) {
+            const headers = new Headers(request.headers);
+            headers.set("x-wovn-nextjs-language", language);
+            headers.set("x-wovn-nextjs-path-without-language", '/');
+            log('rewrite', language, request.nextUrl.pathname);
+            return server_1.NextResponse.rewrite(new URL("/" + url.search, url), { headers });
+        }
+        if (url.pathname.startsWith('/' + language + '/')) {
+            const headers = new Headers(request.headers);
+            headers.set("x-wovn-nextjs-language", language);
+            headers.set("x-wovn-nextjs-path-without-language", url.pathname.slice(language.length + 1));
+            log('rewrite', language, request.nextUrl.pathname);
+            return server_1.NextResponse.rewrite(new URL(url.pathname.slice(language.length + 1) + url.search, url), { headers });
+        }
+    }
+    log('do not rewrite', request.nextUrl.pathname);
+    return server_1.NextResponse.next();
+}
+const state = {
+    fetched: false,
+    debug: !!process.env.WOVN_DEBUG,
+    projectToken: '',
+    sourceLanguage: '',
+    languages: [],
+    sources: [], // [major] == source text
+    translations: {}, // [language][major][minor] == translation
+    rawTranslations: {} // [source]?.[currentLanguage()]?.[0]?.data == translation
+};
+function setTranslations(root) {
+    state.sourceLanguage = root.language;
+    state.rawTranslations = root.html_text_vals;
+    state.translations = {};
+    state.languages = root.convert_langs?.map((lang) => lang.code) || [];
+    const sourceLength = state.sources.length;
+    for (const language of state.languages) {
+        const translations = state.translations[language] = [];
+        for (let i = 0; i < sourceLength; i++) {
+            const source = state.sources[i];
+            const translation = state.rawTranslations[source]?.[language]?.[0]?.data;
+            translations.push(translation ? translation.split(/<.*?>/) : []);
+        }
+    }
+    if (typeof window !== 'undefined') {
+        window.wovnnextjs = { state, t };
+    }
+    log('set translation');
+}
+// for debug
+const log = function (...args) {
+    if (state.debug) {
+        console.log('wovn-nextjs', ...args);
+    }
+};

package/dist/cjs/server.d.ts

@@ -0,0 +1 @@
+export { headers } from "next/headers";

package/dist/cjs/server.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headers = void 0;
+// To avoid Next.js errors because index.ts has 'use client' and can not import next/headers
+var headers_1 = require("next/headers");
+Object.defineProperty(exports, "headers", { enumerable: true, get: function () { return headers_1.headers; } });

package/dist/esm/index.d.ts

@@ -0,0 +1,62 @@
+import type { UrlObject } from "url";
+import { type MiddlewareConfig, NextRequest, NextResponse } from "next/server";
+import { AppContext, AppProps } from "next/app";
+import * as React from "react";
+import { NextRouter } from "next/router";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+export declare function t(source: string): string;
+export declare function currentLanguage(): string;
+export declare function useTranslation(): {
+    t: typeof t;
+    i18n: {
+        changeLanguage(language: string): void;
+    };
+};
+export declare const Link: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof {
+    href: string | UrlObject;
+    as?: string | UrlObject;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}> & {
+    href: string | UrlObject;
+    as?: string | UrlObject;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export declare function usePageRouter(): NextRouter;
+export declare function useAppRouter(): AppRouterInstance;
+declare const wovnMiddlewareConfig: MiddlewareConfig & {
+    matcher: string[];
+};
+export { wovnMiddlewareConfig };
+export declare function wovnMiddleware(request: NextRequest): NextResponse<unknown>;
+export declare function appWithWovn(TargetComponent: React.FunctionComponent<any> | React.ComponentClass<any, any>): {
+    (props: AppProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    getInitialProps(appContext: AppContext): Promise<{
+        pageProps: any;
+    }>;
+};
+export declare function WovnInternalComponent({ major, minor, source }: {
+    major: number;
+    minor: number;
+    source: string;
+}): string;
+export declare function wovnInternalT(source: string): string;

package/dist/esm/index.js

@@ -0,0 +1,255 @@
+'use client';
+import { NextResponse } from "next/server";
+import App from "next/app";
+import * as React from "react";
+import NextLink from "next/link";
+import { headers } from "./server";
+import { formatUrl } from "next/dist/shared/lib/router/utils/format-url";
+import { useRouter as useInternalPageRouter } from "next/router";
+import { useRouter as useInternalAppRouter } from "next/navigation";
+export function t(source) {
+    return wovnInternalT(source);
+}
+export function currentLanguage() {
+    if (typeof window === 'undefined') {
+        return getLanguageInServer() || state.sourceLanguage;
+    }
+    else {
+        const p = location.pathname;
+        return state.languages.find(language => p === `/${language}` || p.startsWith(`/${language}/`)) || state.sourceLanguage;
+    }
+}
+export function useTranslation() {
+    const pageRouter = usePageRouter();
+    const appRouter = useAppRouter();
+    const router = pageRouter || appRouter;
+    return {
+        t,
+        i18n: { changeLanguage(language) {
+                const href = link(undefined, language);
+                log('changeLanguage', language, href);
+                console.log(pageRouter, appRouter);
+                router.push(href);
+            }
+        }
+    };
+}
+function link(href, locale) {
+    const newPathname = linkImpl(href, locale);
+    log('link', locale, href, ' -> ', newPathname);
+    return newPathname;
+}
+function linkImpl(href, locale) {
+    const language = currentLanguage();
+    const pathnameWithoutLanguage = typeof window === 'undefined' ? getPathWithoutLanguage() : language === state.sourceLanguage ? location.pathname : location.pathname.slice(language.length + 1);
+    let targetHref = '';
+    if (typeof href === 'string') {
+        if (/^https?:\.\./.test(href)) {
+            return href;
+        }
+        if (!locale && state.languages.find(language => href === `/${language}` || href.startsWith(`/${language}/`))) {
+            return href;
+        }
+        targetHref = href;
+    }
+    else if (typeof href === 'object') {
+        targetHref = href.pathname || '';
+    }
+    else {
+        targetHref = pathnameWithoutLanguage;
+    }
+    const absPathnameWithoutLanguage = new URL(targetHref, 'http://wovn.io' + pathnameWithoutLanguage).pathname;
+    const targetLanguage = locale || language;
+    const newPathname = (targetLanguage === state.sourceLanguage ? '' : '/' + targetLanguage) + absPathnameWithoutLanguage;
+    if (typeof href === 'object') {
+        return formatUrl({ ...href, pathname: newPathname });
+    }
+    else {
+        return newPathname;
+    }
+}
+export const Link = React.forwardRef(function LinkComponent(props, ref) {
+    fetchJsonDataIfNeeded();
+    const newProps = { ...props, ref, locale: undefined, href: link(props.href, props.locale) };
+    return React.createElement(NextLink, newProps, props.children);
+});
+export function usePageRouter() {
+    const target = useInternalPageRouter();
+    return new Proxy(target, {
+        get(target, prop, receiver) {
+            switch (prop) {
+                case 'push':
+                    return (url, as, options) => target.push(link(url), as ? link(as) : as, options);
+                case 'replace':
+                    return (url, as, options) => target.replace(link(url), as ? link(as) : as, options);
+                case 'prefetch':
+                    return (url, asPath, options) => target.prefetch(link(url), asPath ? link(asPath) : asPath, options);
+                default:
+                    return Reflect.get(target, prop, receiver);
+            }
+        }
+    });
+}
+export function useAppRouter() {
+    return new Proxy(useInternalAppRouter(), {
+        get(target, prop, receiver) {
+            switch (prop) {
+                case 'push':
+                    return (url, options) => target.push(link(url), options);
+                case 'replace':
+                    return (url, options) => target.replace(link(url), options);
+                case 'prefetch':
+                    return (url) => target.prefetch(link(url));
+                default:
+                    return Reflect.get(target, prop, receiver);
+            }
+        }
+    });
+}
+const wovnMiddlewareConfig = { matcher: [] }; // this values will be override by wovn-nextjs build command
+export { wovnMiddlewareConfig };
+export function wovnMiddleware(request) {
+    return rewritePath(state.languages.filter(l => l !== state.sourceLanguage), request);
+}
+export function appWithWovn(TargetComponent) {
+    function AppWithWovn(props) {
+        wovnAsyncLocalStorage.enterWith(props.pageProps.wovn);
+        return React.createElement(TargetComponent, props);
+    }
+    AppWithWovn.getInitialProps = async (appContext) => {
+        const appProps = await App.getInitialProps(appContext);
+        const headers = appContext.ctx.req?.headers || {};
+        return {
+            ...appProps,
+            pageProps: {
+                ...appProps.pageProps,
+                wovn: {
+                    'x-wovn-nextjs-language': headers['x-wovn-nextjs-language'] || '',
+                    'x-wovn-nextjs-path-without-language': headers['x-wovn-nextjs-path-without-language'] || ''
+                }
+            }
+        };
+    };
+    return AppWithWovn;
+}
+// the followings are exported but for internal purpose
+export function WovnInternalComponent({ major, minor, source }) {
+    const text = state.translations[currentLanguage()]?.[major]?.[minor] ?? unescapeHtml(source);
+    log("internal component", major, minor, state.translations[currentLanguage()]?.[major]?.[minor], '  <-  ', source);
+    fetchJsonDataIfNeeded();
+    return text;
+}
+export function wovnInternalT(source) {
+    fetchJsonDataIfNeeded();
+    return translate(source);
+}
+// the followings are helper functions
+function unescapeHtml(s) {
+    return s.replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#039;/g, "'");
+}
+function fetchJsonDataIfNeeded() {
+    if (typeof window === 'undefined') {
+        return; // do nothing when calling by server component
+    }
+    if (!state.projectToken.length) {
+        return;
+    }
+    if (!state.fetched) {
+        window.wovnnextjs = { state, t, currentLanguage };
+        state.fetched = true;
+        fetch(`https://wovn.global.ssl.fastly.net/js_data/json/1/${encodeURIComponent(state.projectToken)}?u=` + encodeURIComponent(`${location.protocol}//${location.hostname}`)).then(res => {
+            if (res.status === 200) {
+                res.json().then(setTranslations);
+            }
+        });
+    }
+}
+function translate(source) {
+    const language = currentLanguage();
+    const key = source.replace(/ \/>/g, '>').replace(/ +</g, '<').replace(/> +/g, '>').replace(/  +/g, ' ');
+    log('try to translate', language, key, state.rawTranslations?.[key]?.[language]?.[0]?.data);
+    if (language === state.sourceLanguage) {
+        return source;
+    }
+    const translation = state.rawTranslations?.[key]?.[language]?.[0]?.data;
+    return translation || source;
+}
+const wovnAsyncLocalStorage = typeof window === 'undefined' ? new global.AsyncLocalStorage() : {
+    enterWith(_) { },
+    getStore() { return null; }
+};
+function get(key) {
+    if (typeof window === 'undefined') {
+        try {
+            const s = wovnAsyncLocalStorage.getStore();
+            return s ? s[key] : headers().get(key);
+        }
+        catch (e) {
+            return e instanceof Error ? `(${e.message})` : '';
+        }
+    }
+    else {
+        throw new Error('This function should not be called in client');
+    }
+}
+function getLanguageInServer() { return get('x-wovn-nextjs-language'); }
+function getPathWithoutLanguage() { return get('x-wovn-nextjs-path-without-language'); }
+function rewritePath(targetLanguages, request) {
+    if (request.nextUrl.pathname.startsWith('/_next') || request.nextUrl.pathname.startsWith('/favicon')) {
+        return NextResponse.next();
+    }
+    for (const language of targetLanguages) {
+        const url = new URL(request.url);
+        if (url.pathname === '/' + language) {
+            const headers = new Headers(request.headers);
+            headers.set("x-wovn-nextjs-language", language);
+            headers.set("x-wovn-nextjs-path-without-language", '/');
+            log('rewrite', language, request.nextUrl.pathname);
+            return NextResponse.rewrite(new URL("/" + url.search, url), { headers });
+        }
+        if (url.pathname.startsWith('/' + language + '/')) {
+            const headers = new Headers(request.headers);
+            headers.set("x-wovn-nextjs-language", language);
+            headers.set("x-wovn-nextjs-path-without-language", url.pathname.slice(language.length + 1));
+            log('rewrite', language, request.nextUrl.pathname);
+            return NextResponse.rewrite(new URL(url.pathname.slice(language.length + 1) + url.search, url), { headers });
+        }
+    }
+    log('do not rewrite', request.nextUrl.pathname);
+    return NextResponse.next();
+}
+const state = {
+    fetched: false,
+    debug: !!process.env.WOVN_DEBUG,
+    projectToken: '',
+    sourceLanguage: '',
+    languages: [],
+    sources: [], // [major] == source text
+    translations: {}, // [language][major][minor] == translation
+    rawTranslations: {} // [source]?.[currentLanguage()]?.[0]?.data == translation
+};
+function setTranslations(root) {
+    state.sourceLanguage = root.language;
+    state.rawTranslations = root.html_text_vals;
+    state.translations = {};
+    state.languages = root.convert_langs?.map((lang) => lang.code) || [];
+    const sourceLength = state.sources.length;
+    for (const language of state.languages) {
+        const translations = state.translations[language] = [];
+        for (let i = 0; i < sourceLength; i++) {
+            const source = state.sources[i];
+            const translation = state.rawTranslations[source]?.[language]?.[0]?.data;
+            translations.push(translation ? translation.split(/<.*?>/) : []);
+        }
+    }
+    if (typeof window !== 'undefined') {
+        window.wovnnextjs = { state, t };
+    }
+    log('set translation');
+}
+// for debug
+const log = function (...args) {
+    if (state.debug) {
+        console.log('wovn-nextjs', ...args);
+    }
+};

package/dist/esm/server.d.ts

@@ -0,0 +1 @@
+export { headers } from "next/headers";

package/dist/esm/server.js

@@ -0,0 +1,2 @@
+// To avoid Next.js errors because index.ts has 'use client' and can not import next/headers
+export { headers } from "next/headers";

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "wovn-nextjs",
+  "version": "0.0.4",
+  "description": "Localize the Next.js web application without changing the code",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/cjs/index.js"
+    }
+  },
+  "bin": {
+    "wovn-nextjs": "bin/wovn-nextjs"
+  },
+  "scripts": {
+    "test": "node --test --watch",
+    "build": "npx tsc src/index.ts --declaration --target esnext --module esnext --moduleResolution bundler --strict true --skipLibCheck true --outDir dist/esm && npx tsc src/index.ts --declaration --target esnext --module CommonJS --strict true --skipLibCheck true --outDir dist/cjs"
+  },
+  "files": [
+    "./bin/wovn-nextjs",
+    "./dist"
+  ],
+  "directories": {
+    "example": "example"
+  },
+  "author": "",
+  "license": "UNLICENSED",
+  "volta": {
+    "node": "20.16.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^25.0.0",
+    "tsx": "^4.19.1",
+    "typescript": "5.5.4",
+    "typescript-eslint": "^8.0.0"
+  },
+  "peerDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript-eslint": "^8.0.0"
+  },
+  "dependencies": {
+    "wovn-nextjs": "file:wovn-nextjs-0.0.1.tgz"
+  }
+}