From f6cdf1202ea7866ca2772c7ced1de17bb39688eb Mon Sep 17 00:00:00 2001 From: matthewp Date: Thu, 16 Jun 2022 13:55:54 +0000 Subject: [PATCH] [ci] format --- .../runtime/client/hydration-directives.d.ts | 2 +- packages/astro/src/runtime/client/idle.ts | 2 +- packages/astro/src/runtime/client/load.ts | 2 -- packages/astro/src/runtime/client/media.ts | 8 ++--- packages/astro/src/runtime/client/only.ts | 7 ++-- packages/astro/src/runtime/client/visible.ts | 32 +++++++++---------- .../astro/src/runtime/server/astro-island.ts | 26 ++++++++------- packages/astro/src/runtime/server/index.ts | 20 ++++++------ packages/astro/src/runtime/server/scripts.ts | 29 +++++------------ scripts/cmd/build.js | 6 ++-- scripts/cmd/prebuild.js | 2 +- 11 files changed, 60 insertions(+), 76 deletions(-) diff --git a/packages/astro/src/runtime/client/hydration-directives.d.ts b/packages/astro/src/runtime/client/hydration-directives.d.ts index 512b5c39a..6832ab24f 100644 --- a/packages/astro/src/runtime/client/hydration-directives.d.ts +++ b/packages/astro/src/runtime/client/hydration-directives.d.ts @@ -10,7 +10,7 @@ declare global { media: DirectiveLoader; only: DirectiveLoader; visible: DirectiveLoader; - } + }; } } diff --git a/packages/astro/src/runtime/client/idle.ts b/packages/astro/src/runtime/client/idle.ts index a5564fc5a..90090731e 100644 --- a/packages/astro/src/runtime/client/idle.ts +++ b/packages/astro/src/runtime/client/idle.ts @@ -9,4 +9,4 @@ } else { setTimeout(cb, 200); } -} +}; diff --git a/packages/astro/src/runtime/client/load.ts b/packages/astro/src/runtime/client/load.ts index 77f74eaaf..9081799ed 100644 --- a/packages/astro/src/runtime/client/load.ts +++ b/packages/astro/src/runtime/client/load.ts @@ -4,5 +4,3 @@ await hydrate(); })(); }; - - diff --git a/packages/astro/src/runtime/client/media.ts b/packages/astro/src/runtime/client/media.ts index 09985ebeb..0bf11e448 100644 --- a/packages/astro/src/runtime/client/media.ts +++ b/packages/astro/src/runtime/client/media.ts @@ -1,7 +1,7 @@ /** * Hydrate this component when a matching media query is found */ - (self.Astro = self.Astro || {}).media = (getHydrateCallback, options) => { +(self.Astro = self.Astro || {}).media = (getHydrateCallback, options) => { const cb = async () => { let hydrate = await getHydrateCallback(); await hydrate(); @@ -15,8 +15,4 @@ mql.addEventListener('change', cb, { once: true }); } } - }; - - - - +}; diff --git a/packages/astro/src/runtime/client/only.ts b/packages/astro/src/runtime/client/only.ts index 8cc5f42aa..78832e9dc 100644 --- a/packages/astro/src/runtime/client/only.ts +++ b/packages/astro/src/runtime/client/only.ts @@ -1,12 +1,9 @@ /** * Hydrate this component only on the client */ - (self.Astro = self.Astro || {}).only = (getHydrateCallback) => { +(self.Astro = self.Astro || {}).only = (getHydrateCallback) => { (async () => { let hydrate = await getHydrateCallback(); await hydrate(); })(); - }; - - - \ No newline at end of file +}; diff --git a/packages/astro/src/runtime/client/visible.ts b/packages/astro/src/runtime/client/visible.ts index e3cbbfa7d..eac73115f 100644 --- a/packages/astro/src/runtime/client/visible.ts +++ b/packages/astro/src/runtime/client/visible.ts @@ -5,22 +5,22 @@ */ (self.Astro = self.Astro || {}).visible = (getHydrateCallback, _opts, root) => { const cb = async () => { - let hydrate = await getHydrateCallback(); - await hydrate(); - }; + let hydrate = await getHydrateCallback(); + await hydrate(); + }; - let io = new IntersectionObserver((entries) => { - for (const entry of entries) { - if (!entry.isIntersecting) continue; - // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-island` - io.disconnect(); - cb(); - break; // break loop on first match - } - }); - - for (let i = 0; i < root.children.length; i++) { - const child = root.children[i]; - io.observe(child); + let io = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (!entry.isIntersecting) continue; + // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-island` + io.disconnect(); + cb(); + break; // break loop on first match } + }); + + for (let i = 0; i < root.children.length; i++) { + const child = root.children[i]; + io.observe(child); + } }; diff --git a/packages/astro/src/runtime/server/astro-island.ts b/packages/astro/src/runtime/server/astro-island.ts index 92168f728..a067c9a57 100644 --- a/packages/astro/src/runtime/server/astro-island.ts +++ b/packages/astro/src/runtime/server/astro-island.ts @@ -10,7 +10,7 @@ declare const Astro: { opts: Record, root: HTMLElement ) => void; -} +}; { interface PropTypeSelector { @@ -45,16 +45,20 @@ declare const Astro: { window.addEventListener('astro:hydrate', this.hydrate); await import(this.getAttribute('before-hydration-url')!); const opts = JSON.parse(this.getAttribute('opts')!) as Record; - Astro[this.getAttribute('client') as directiveAstroKeys](async () => { - const rendererUrl = this.getAttribute('renderer-url'); - const [componentModule, { default: hydrator }] = await Promise.all([ - import(this.getAttribute('component-url')!), - rendererUrl ? import(rendererUrl) : () => () => {}, - ]); - this.Component = componentModule[this.getAttribute('component-export') || 'default']; - this.hydrator = hydrator; - return this.hydrate; - }, opts, this); + Astro[this.getAttribute('client') as directiveAstroKeys]( + async () => { + const rendererUrl = this.getAttribute('renderer-url'); + const [componentModule, { default: hydrator }] = await Promise.all([ + import(this.getAttribute('component-url')!), + rendererUrl ? import(rendererUrl) : () => () => {}, + ]); + this.Component = componentModule[this.getAttribute('component-export') || 'default']; + this.hydrator = hydrator; + return this.hydrate; + }, + opts, + this + ); } hydrate = () => { if (!this.hydrator || this.parentElement?.closest('astro-island[ssr]')) { diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts index 88a4f1cd3..539bfad63 100644 --- a/packages/astro/src/runtime/server/index.ts +++ b/packages/astro/src/runtime/server/index.ts @@ -11,14 +11,14 @@ import type { import { escapeHTML, HTMLString, markHTMLString } from './escape.js'; import { extractDirectives, generateHydrateScript } from './hydration.js'; -import { serializeProps } from './serialize.js'; -import { shorthash } from './shorthash.js'; import { determineIfNeedsHydrationScript, determinesIfNeedsDirectiveScript, + getPrescripts, PrescriptType, - getPrescripts } from './scripts.js'; +import { serializeProps } from './serialize.js'; +import { shorthash } from './shorthash.js'; import { serializeListValue } from './util.js'; export { markHTMLString, markHTMLString as unescapeHTML } from './escape.js'; @@ -33,7 +33,6 @@ const htmlEnumAttributes = /^(contenteditable|draggable|spellcheck|value)$/i; // Note: SVG is case-sensitive! const svgEnumAttributes = /^(autoReverse|externalResourcesRequired|focusable|preserveAlpha)$/i; - // INVESTIGATE: // 2. Less anys when possible and make it well known when they are needed. @@ -152,7 +151,6 @@ function formatList(values: string[]): string { return `${values.slice(0, -1).join(', ')} or ${values[values.length - 1]}`; } - export async function renderComponent( result: SSRResult, displayName: string, @@ -186,7 +184,8 @@ export async function renderComponent( const { hydration, props } = extractDirectives(_props); let html = ''; let needsHydrationScript = hydration && determineIfNeedsHydrationScript(result); - let needsDirectiveScript = hydration && determinesIfNeedsDirectiveScript(result, hydration.directive); + let needsDirectiveScript = + hydration && determinesIfNeedsDirectiveScript(result, hydration.directive); if (hydration) { metadata.hydrate = hydration.directive as AstroComponentMetadata['hydrate']; @@ -344,10 +343,13 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr island.children = `${html ?? ''}${template}`; - let prescriptType: PrescriptType = needsHydrationScript ? 'both' : needsDirectiveScript ? - 'directive' : null; + let prescriptType: PrescriptType = needsHydrationScript + ? 'both' + : needsDirectiveScript + ? 'directive' + : null; let prescripts = getPrescripts(prescriptType, hydration.directive); - + return markHTMLString(prescripts + renderElement('astro-island', island, false)); } diff --git a/packages/astro/src/runtime/server/scripts.ts b/packages/astro/src/runtime/server/scripts.ts index 85efa795a..0446ed2c7 100644 --- a/packages/astro/src/runtime/server/scripts.ts +++ b/packages/astro/src/runtime/server/scripts.ts @@ -1,21 +1,11 @@ -import type { - APIContext, - AstroComponentMetadata, - AstroGlobalPartial, - EndpointHandler, - Params, - SSRElement, - SSRLoadedRenderer, - SSRResult, -} from '../../@types/astro'; +import type { SSRResult } from '../../@types/astro'; -import islandScript from './astro-island.prebuilt.js'; import idlePrebuilt from '../client/idle.prebuilt.js'; import loadPrebuilt from '../client/load.prebuilt.js'; +import mediaPrebuilt from '../client/media.prebuilt.js'; import onlyPrebuilt from '../client/only.prebuilt.js'; import visiblePrebuilt from '../client/visible.prebuilt.js'; -import mediaPrebuilt from '../client/media.prebuilt.js'; - +import islandScript from './astro-island.prebuilt.js'; // This is used to keep track of which requests (pages) have had the hydration script // appended. We only add the hydration script once per page, and since the SSRResult @@ -35,29 +25,27 @@ export const hydrationScripts: Record = { load: loadPrebuilt, only: onlyPrebuilt, media: mediaPrebuilt, - visible: visiblePrebuilt + visible: visiblePrebuilt, }; const resultsWithDirectiveScript = new Map>(); export function determinesIfNeedsDirectiveScript(result: SSRResult, directive: string): boolean { - if(!resultsWithDirectiveScript.has(directive)) { + if (!resultsWithDirectiveScript.has(directive)) { resultsWithDirectiveScript.set(directive, new WeakSet()); } const set = resultsWithDirectiveScript.get(directive)!; - if(set.has(result)) { + if (set.has(result)) { return false; } set.add(result); return true; } - - export type PrescriptType = null | 'both' | 'directive'; function getDirectiveScriptText(directive: string): string { - if(!(directive in hydrationScripts)) { + if (!(directive in hydrationScripts)) { throw new Error(`Unknown directive: ${directive}`); } const directiveScriptText = hydrationScripts[directive]; @@ -69,9 +57,8 @@ export function getPrescripts(type: PrescriptType, directive: string): string { // This is so that it executes immediate, and when the browser encounters // an astro-island element the callbacks will fire immediately, causing the JS // deps to be loaded immediately. - switch(type) { + switch (type) { case 'both': - return ``; case 'directive': return ``; diff --git a/scripts/cmd/build.js b/scripts/cmd/build.js index a95a5b8e3..de204becf 100644 --- a/scripts/cmd/build.js +++ b/scripts/cmd/build.js @@ -23,12 +23,12 @@ const dt = new Intl.DateTimeFormat('en-us', { function getPrebuilds(isDev, args) { let prebuilds = []; - while(args.includes('--prebuild')) { + while (args.includes('--prebuild')) { let idx = args.indexOf('--prebuild'); prebuilds.push(args[idx + 1]); args.splice(idx, 2); } - if(prebuilds.length && isDev) { + if (prebuilds.length && isDev) { prebuilds.unshift('--no-minify'); } return prebuilds; @@ -74,7 +74,7 @@ export default async function build(...args) { ...config, watch: { onRebuild(error, result) { - if(prebuilds.length) { + if (prebuilds.length) { prebuild(...prebuilds); } const date = dt.format(new Date()); diff --git a/scripts/cmd/prebuild.js b/scripts/cmd/prebuild.js index 0d14e63f1..cc276b943 100644 --- a/scripts/cmd/prebuild.js +++ b/scripts/cmd/prebuild.js @@ -13,7 +13,7 @@ export default async function prebuild(...args) { } let minify = true; let minifyIdx = args.indexOf('--no-minify'); - if(minifyIdx !== -1) { + if (minifyIdx !== -1) { minify = false; args.splice(minifyIdx, 1); }