Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui-templates): misc improvements (#27033)

Browse Source
This commit is contained in:
Daniel Roe 2024-05-02 09:51:39 +01:00 committed by GitHub
parent 58349a4594
commit 572c367455
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ui-templates/lib/prerender.ts
View File

@ -5,15 +5,15 @@ import { globby } from 'globby'
const r = (...path: string[]) => resolve(join(__dirname, '..', ...path)) const r = (...path: string[]) => resolve(join(__dirname, '..', ...path))
async function main () { async function main () {
const templates = await globby(r('dist/templates/*.mjs')) const templates = await globby(r('dist/templates/*.js'))
for (const file of templates) { for (const file of templates) {
const { template } = await import(file) const { template } = await import(file)
const updated = template({ const updated = template({
// messages: {}, // messages: {},
name: '{{ name }}', // TODO name: '{{ name }}', // TODO
}) })
await fsp.mkdir(file.replace('.mjs', '')) await fsp.mkdir(file.replace('.js', ''))
await fsp.writeFile(file.replace('.mjs', '/index.html'), updated) await fsp.writeFile(file.replace('.js', '/index.html'), updated)
} }
} }

29
packages/ui-templates/lib/render.ts
View File

@ -1,4 +1,4 @@
import { promises as fsp } from 'node:fs' import { readFileSync, rmdirSync, unlinkSync, writeFileSync } from 'node:fs'
import { basename, dirname, join, resolve } from 'pathe' import { basename, dirname, join, resolve } from 'pathe'
import type { Plugin } from 'vite' import type { Plugin } from 'vite'
// @ts-expect-error https://github.com/GoogleChromeLabs/critters/pull/151 // @ts-expect-error https://github.com/GoogleChromeLabs/critters/pull/151
@ -6,6 +6,7 @@ import Critters from 'critters'
import { template } from 'lodash-es' import { template } from 'lodash-es'
import { genObjectFromRawEntries } from 'knitwork' import { genObjectFromRawEntries } from 'knitwork'
import htmlMinifier from 'html-minifier' import htmlMinifier from 'html-minifier'
import { globby } from 'globby'
import { camelCase } from 'scule' import { camelCase } from 'scule'
import genericMessages from '../templates/messages.json' import genericMessages from '../templates/messages.json'
@ -21,7 +22,6 @@ export const RenderPlugin = () => {
async writeBundle () { async writeBundle () {
const distDir = r('dist') const distDir = r('dist')
const critters = new Critters({ path: distDir }) const critters = new Critters({ path: distDir })
const globby = await import('globby').then(r => r.globby)
const htmlFiles = await globby(r('dist/templates/**/*.html')) const htmlFiles = await globby(r('dist/templates/**/*.html'))
const templateExports = [] const templateExports = []
@ -34,7 +34,7 @@ export const RenderPlugin = () => {
console.log('Processing', templateName) console.log('Processing', templateName)
// Read source template // Read source template
let html = await fsp.readFile(fileName, 'utf-8') let html = readFileSync(fileName, 'utf-8')
const isCompleteHTML = html.includes('<!DOCTYPE html>') const isCompleteHTML = html.includes('<!DOCTYPE html>')
if (html.includes('<html')) { if (html.includes('<html')) {
@ -50,7 +50,7 @@ export const RenderPlugin = () => {
.filter(src => src?.match(/\.svg$/)) .filter(src => src?.match(/\.svg$/))
for (const src of svgSources) { for (const src of svgSources) {
const svg = await fsp.readFile(r('dist', src), 'utf-8') const svg = readFileSync(r('dist', src), 'utf-8')
const base64Source = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}` const base64Source = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
html = replaceAll(html, src, base64Source) html = replaceAll(html, src, base64Source)
} }
@ -60,7 +60,7 @@ export const RenderPlugin = () => {
.filter(([_block, src]) => src?.match(/^\/.*\.js$/)) .filter(([_block, src]) => src?.match(/^\/.*\.js$/))
for (const [scriptBlock, src] of scriptSources) { for (const [scriptBlock, src] of scriptSources) {
let contents = await fsp.readFile(r('dist', src), 'utf-8') let contents = readFileSync(r('dist', src), 'utf-8')
contents = replaceAll(contents, '/* empty css */', '').trim() contents = replaceAll(contents, '/* empty css */', '').trim()
html = html.replace(scriptBlock, contents.length ? `<script>${contents}</script>` : '') html = html.replace(scriptBlock, contents.length ? `<script>${contents}</script>` : '')
} }
@ -74,7 +74,7 @@ export const RenderPlugin = () => {
} }
// Load messages // Load messages
const messages = JSON.parse(await fsp.readFile(r(`templates/${templateName}/messages.json`), 'utf-8')) const messages = JSON.parse(readFileSync(r(`templates/${templateName}/messages.json`), 'utf-8'))
// Serialize into a js function // Serialize into a js function
const jsCode = [ const jsCode = [
@ -146,21 +146,20 @@ export const RenderPlugin = () => {
}) })
// Write new template // Write new template
await fsp.writeFile(fileName.replace('/index.html', '.js'), `${jsCode}\nexport const template = _template`) writeFileSync(fileName.replace('/index.html', '.js'), `${jsCode}\nexport const template = _template`)
await fsp.writeFile(fileName.replace('/index.html', '.vue'), vueCode) writeFileSync(fileName.replace('/index.html', '.vue'), vueCode)
await fsp.writeFile(fileName.replace('/index.html', '.d.ts'), `${types}`) writeFileSync(fileName.replace('/index.html', '.d.ts'), `${types}`)
// Remove original html file // Remove original html file
await fsp.unlink(fileName) unlinkSync(fileName)
await fsp.rmdir(dirname(fileName)) rmdirSync(dirname(fileName))
} }
// Write an index file with named exports for each template // Write an index file with named exports for each template
const contents = templateExports.map(exp => `export { template as ${exp.exportName} } from './templates/${exp.templateName}.mjs'`).join('\n') const contents = templateExports.map(exp => `export { template as ${exp.exportName} } from './templates/${exp.templateName}.js'`).join('\n')
await fsp.writeFile(r('dist/index.mjs'), contents, 'utf8') writeFileSync(r('dist/index.js'), contents, 'utf8')
await fsp.writeFile(r('dist/index.d.ts'), replaceAll(contents, /\.mjs/g, ''), 'utf8') writeFileSync(r('dist/index.d.ts'), replaceAll(contents, /\.js/g, ''), 'utf8')
await fsp.writeFile(r('dist/index.d.mts'), replaceAll(contents, /\.mjs/g, ''), 'utf8')
}, },
} }
} }

4
packages/ui-templates/test/snapshots.spec.ts
View File

@ -1,5 +1,5 @@
import fsp from 'node:fs/promises'
import { fileURLToPath } from 'node:url' import { fileURLToPath } from 'node:url'
import { readFileSync } from 'node:fs'
import { beforeAll, describe, expect, it } from 'vitest' import { beforeAll, describe, expect, it } from 'vitest'
import { execaCommand } from 'execa' import { execaCommand } from 'execa'
import { format } from 'prettier' import { format } from 'prettier'
@ -20,7 +20,7 @@ describe('template', () => {
} }
it.each(['error-404.vue', 'error-500.vue', 'error-dev.vue', 'loading.vue', 'welcome.vue'])('correctly outputs style blocks for %s', async (file) => { it.each(['error-404.vue', 'error-500.vue', 'error-dev.vue', 'loading.vue', 'welcome.vue'])('correctly outputs style blocks for %s', async (file) => {
const contents = await fsp.readFile(`${distDir}/${file}`, 'utf-8') const contents = readFileSync(`${distDir}/${file}`, 'utf-8')
const scopedStyle = contents.match(/<style scoped>([\s\S]*)<\/style>/) const scopedStyle = contents.match(/<style scoped>([\s\S]*)<\/style>/)
const globalStyle = contents.match(/style: \[[\s\S]*children: `([\s\S]*)`/) const globalStyle = contents.match(/style: \[[\s\S]*children: `([\s\S]*)`/)