refactor: migrate to ts initial

This commit is contained in:
Ayo Ayco 2025-04-20 15:12:47 +02:00
parent b36ef663f0
commit dce88c2708
12 changed files with 529 additions and 779 deletions

View file

@ -28,6 +28,7 @@
"husky": "^9.1.7", "husky": "^9.1.7",
"netlify-cli": "^19.0.3", "netlify-cli": "^19.0.3",
"prettier": "^3.5.3", "prettier": "^3.5.3",
"tsup": "^8.4.0",
"typescript": "^5.8.2", "typescript": "^5.8.2",
"vitest": "^3.0.9" "vitest": "^3.0.9"
}, },

View file

@ -1 +1 @@
export { defineMcFlyConfig } from './define-mcfly-config.js' export { type McFlyConfig, defineMcFlyConfig } from './define-mcfly-config.js'

View file

@ -54,7 +54,6 @@
"@vitest/ui": "3.0.9", "@vitest/ui": "3.0.9",
"esbuild": "^0.25.1", "esbuild": "^0.25.1",
"hookable": "^5.5.3", "hookable": "^5.5.3",
"unbuild": "^3.5.0",
"unstorage": "^1.15.0", "unstorage": "^1.15.0",
"vitest": "^3.0.9" "vitest": "^3.0.9"
} }

View file

@ -1,3 +1,3 @@
export const defaultMcflyConfig = { export const defaultMcflyConfig = {
components: 'js', components: 'js',
} } as const

View file

@ -1,6 +1,7 @@
import { ELEMENT_NODE, parse, renderSync, walkSync } from 'ultrahtml' import { ELEMENT_NODE, parse, renderSync, walkSync } from 'ultrahtml'
import { parseScript } from 'esprima' import { parseScript } from 'esprima'
import { consola } from 'consola' import { consola } from 'consola'
import type { BaseNode as JsNode } from 'estree'
/** /**
* @typedef {import('estree').BaseNode} JsNode * @typedef {import('estree').BaseNode} JsNode
@ -8,10 +9,10 @@ import { consola } from 'consola'
/** /**
* McFly HTML Template parser * McFly HTML Template parser
* @param {*} _html * @param {string} _html
* @returns {string} * @returns {string}
*/ */
export function evaluateServerScripts(_html) { export function evaluateServerScripts(_html: string) {
let html = evaluateServerScript(_html) let html = evaluateServerScript(_html)
html = deleteServerScripts(html) html = deleteServerScripts(html)
return html return html
@ -22,9 +23,9 @@ export function evaluateServerScripts(_html) {
* @param {string} html * @param {string} html
* @returns {string} * @returns {string}
*/ */
function evaluateServerScript(html) { function evaluateServerScript(html: string) {
const ast = parse(html) const ast = parse(html)
const serverScripts = [] const serverScripts: string[] = []
walkSync(ast, (node) => { walkSync(ast, (node) => {
const { attributes } = node const { attributes } = node
const attributeKeys = Object.keys(attributes ?? {}) const attributeKeys = Object.keys(attributes ?? {})
@ -45,7 +46,12 @@ function evaluateServerScript(html) {
const { body } = parseScript(script) const { body } = parseScript(script)
const keys = body const keys = body
.filter((n) => n.type === 'VariableDeclaration') .filter((n) => n.type === 'VariableDeclaration')
.map((n) => n['declarations'][0].id.name) /**
* TODO - fix types or replace esprima w/ acorn
*/
// @ts-ignore
.map((n) => n.declarations[0].id.name) //['declarations'][0].id.name)
const constructor = `(function(){}.constructor)(\`${script}; return {${keys.join( const constructor = `(function(){}.constructor)(\`${script}; return {${keys.join(
',' ','
)}}\`);` )}}\`);`
@ -62,7 +68,8 @@ function evaluateServerScript(html) {
const value = rawValue.replace(/\s/g, '') const value = rawValue.replace(/\s/g, '')
const keys = value.split('.') const keys = value.split('.')
let finalValue = '' let finalValue = ''
let setupCopy = setupMap // TODO: remove any
let setupCopy: any = setupMap
// if not in the server script, it could be a js expression // if not in the server script, it could be a js expression
if (!(keys[0] in setupMap)) { if (!(keys[0] in setupMap)) {
@ -93,7 +100,7 @@ function evaluateServerScript(html) {
* @param {string} html * @param {string} html
* @returns {string} * @returns {string}
*/ */
function deleteServerScripts(html) { function deleteServerScripts(html: string) {
const ast = parse(html) const ast = parse(html)
walkSync(ast, (node) => { walkSync(ast, (node) => {
const { attributes } = node const { attributes } = node
@ -112,7 +119,7 @@ function deleteServerScripts(html) {
* @param {Array<string>} scripts * @param {Array<string>} scripts
* @returns {string} * @returns {string}
*/ */
function cleanScript(scripts) { function cleanScript(scripts: string[]) {
let script = scripts.map((s) => s.trim()).join(' ') let script = scripts.map((s) => s.trim()).join(' ')
script = removeComments(script) script = removeComments(script)
@ -125,8 +132,8 @@ function cleanScript(scripts) {
* @param {string} script * @param {string} script
* @returns {string} * @returns {string}
*/ */
function removeComments(script) { function removeComments(script: string) {
const entries = [] const entries: any[] = []
parseScript(script, { comment: true }, function (node, meta) { parseScript(script, { comment: true }, function (node, meta) {
if (isComment(node)) { if (isComment(node)) {
entries.push({ entries.push({
@ -152,7 +159,7 @@ function removeComments(script) {
* @param {JsNode} node * @param {JsNode} node
* @returns {boolean} * @returns {boolean}
*/ */
function isComment(node) { function isComment(node: JsNode) {
return ( return (
node.type === 'Line' || node.type === 'Line' ||
node.type === 'Block' || node.type === 'Block' ||

View file

@ -1,10 +1,12 @@
import type { Storage } from 'unstorage'
/** /**
* Get all files from the storage given a type * Get all files from the storage given a type
* @param {string} type * @param {string} type
* @param {Storage} storage * @param {Storage} storage
* @returns {Promise<string[]>} * @returns {Promise<string[]>}
*/ */
export async function getFiles(type, storage) { export async function getFiles(type: string, storage: Storage) {
return (await storage.getKeys('assets:components')) return (await storage.getKeys('assets:components'))
.map((key) => key.replace('assets:components:', '')) .map((key) => key.replace('assets:components:', ''))
.filter((key) => key.includes(type)) .filter((key) => key.includes(type))

View file

@ -1,7 +0,0 @@
export { defaultMcflyConfig } from './default-mcfly-config.mjs'
export { evaluateServerScripts } from './evaluate-scripts.mjs'
export { getFiles } from './get-files.mjs'
export { hooks } from './hooks.mjs'
export { injectCustomElements } from './inject-elements.mjs'
export { injectHtmlFragments } from './inject-fragments.mjs'
export { mcflyNitroConfig as nitroConfig } from '../mcfly-nitro-config.js'

View file

@ -0,0 +1,7 @@
export { defaultMcflyConfig } from './default-mcfly-config.js'
export { evaluateServerScripts } from './evaluate-scripts.js'
export { getFiles } from './get-files.js'
export { hooks } from './hooks.mjs'
export { injectCustomElements } from './inject-elements.js'
export { injectHtmlFragments } from './inject-fragments.mjs'
export { mcflyNitroConfig as nitroConfig } from '../mcfly-nitro-config.js'

View file

@ -1,14 +1,16 @@
import { ELEMENT_NODE, parse, render, walkSync } from 'ultrahtml' import { ELEMENT_NODE, parse, render, walkSync } from 'ultrahtml'
import { getFiles } from './get-files.mjs' import { getFiles } from './get-files.js'
// import type { Storage } from 'unstorage'
// import type { McFlyConfig } from '../../../config/dist/index.js'
/** /**
* @typedef {import('../../config/index.js').McFlyConfig} Config * @typedef {import('../../../config/dist/index.js').McFlyConfig} McFlyConfig
*/ */
/** /**
* Returns transformed HTML with custom elements registry in the head * Returns transformed HTML with custom elements registry in the head
* @param {string} html * @param {string} html
* @param {Config['components']} type * @param {McFlyConfig['components']} type
* @param {Storage} storage * @param {Storage} storage
* @returns {Promise<string>} * @returns {Promise<string>}
*/ */

View file

@ -1,5 +1,5 @@
import { ELEMENT_NODE, parse, render, walkSync } from 'ultrahtml' import { ELEMENT_NODE, parse, render, walkSync } from 'ultrahtml'
import { getFiles } from './get-files.mjs' import { getFiles } from './get-files.js'
/** /**
* @typedef {import('ultrahtml').Node} HtmlNode * @typedef {import('ultrahtml').Node} HtmlNode

File diff suppressed because it is too large Load diff

View file

@ -1,11 +1,9 @@
// @ts-check
import { defineMcFlyConfig } from '@mcflyjs/config' import { defineMcFlyConfig } from '@mcflyjs/config'
import testPlugin from './test-plugin.mjs' import testPlugin from './test-plugin.mjs'
export default defineMcFlyConfig({ export default defineMcFlyConfig({
components: 'js', components: 'js',
server: {
logs: true,
},
plugins: [testPlugin()], plugins: [testPlugin()],
nitro: { nitro: {
preset: 'netlify', preset: 'netlify',