[ci] format

This commit is contained in:
matthewp 2022-06-16 13:55:54 +00:00 committed by github-actions[bot]
parent 4916b733c2
commit f6cdf1202e
11 changed files with 60 additions and 76 deletions

View file

@ -10,7 +10,7 @@ declare global {
media: DirectiveLoader; media: DirectiveLoader;
only: DirectiveLoader; only: DirectiveLoader;
visible: DirectiveLoader; visible: DirectiveLoader;
} };
} }
} }

View file

@ -9,4 +9,4 @@
} else { } else {
setTimeout(cb, 200); setTimeout(cb, 200);
} }
} };

View file

@ -4,5 +4,3 @@
await hydrate(); await hydrate();
})(); })();
}; };

View file

@ -1,7 +1,7 @@
/** /**
* Hydrate this component when a matching media query is found * 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 () => { const cb = async () => {
let hydrate = await getHydrateCallback(); let hydrate = await getHydrateCallback();
await hydrate(); await hydrate();
@ -15,8 +15,4 @@
mql.addEventListener('change', cb, { once: true }); mql.addEventListener('change', cb, { once: true });
} }
} }
}; };

View file

@ -1,12 +1,9 @@
/** /**
* Hydrate this component only on the client * Hydrate this component only on the client
*/ */
(self.Astro = self.Astro || {}).only = (getHydrateCallback) => { (self.Astro = self.Astro || {}).only = (getHydrateCallback) => {
(async () => { (async () => {
let hydrate = await getHydrateCallback(); let hydrate = await getHydrateCallback();
await hydrate(); await hydrate();
})(); })();
}; };

View file

@ -5,22 +5,22 @@
*/ */
(self.Astro = self.Astro || {}).visible = (getHydrateCallback, _opts, root) => { (self.Astro = self.Astro || {}).visible = (getHydrateCallback, _opts, root) => {
const cb = async () => { const cb = async () => {
let hydrate = await getHydrateCallback(); let hydrate = await getHydrateCallback();
await hydrate(); await hydrate();
}; };
let io = new IntersectionObserver((entries) => { let io = new IntersectionObserver((entries) => {
for (const entry of entries) { for (const entry of entries) {
if (!entry.isIntersecting) continue; if (!entry.isIntersecting) continue;
// As soon as we hydrate, disconnect this IntersectionObserver for every `astro-island` // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-island`
io.disconnect(); io.disconnect();
cb(); cb();
break; // break loop on first match break; // break loop on first match
}
});
for (let i = 0; i < root.children.length; i++) {
const child = root.children[i];
io.observe(child);
} }
});
for (let i = 0; i < root.children.length; i++) {
const child = root.children[i];
io.observe(child);
}
}; };

View file

@ -10,7 +10,7 @@ declare const Astro: {
opts: Record<string, any>, opts: Record<string, any>,
root: HTMLElement root: HTMLElement
) => void; ) => void;
} };
{ {
interface PropTypeSelector { interface PropTypeSelector {
@ -45,16 +45,20 @@ declare const Astro: {
window.addEventListener('astro:hydrate', this.hydrate); window.addEventListener('astro:hydrate', this.hydrate);
await import(this.getAttribute('before-hydration-url')!); await import(this.getAttribute('before-hydration-url')!);
const opts = JSON.parse(this.getAttribute('opts')!) as Record<string, any>; const opts = JSON.parse(this.getAttribute('opts')!) as Record<string, any>;
Astro[this.getAttribute('client') as directiveAstroKeys](async () => { Astro[this.getAttribute('client') as directiveAstroKeys](
const rendererUrl = this.getAttribute('renderer-url'); async () => {
const [componentModule, { default: hydrator }] = await Promise.all([ const rendererUrl = this.getAttribute('renderer-url');
import(this.getAttribute('component-url')!), const [componentModule, { default: hydrator }] = await Promise.all([
rendererUrl ? import(rendererUrl) : () => () => {}, import(this.getAttribute('component-url')!),
]); rendererUrl ? import(rendererUrl) : () => () => {},
this.Component = componentModule[this.getAttribute('component-export') || 'default']; ]);
this.hydrator = hydrator; this.Component = componentModule[this.getAttribute('component-export') || 'default'];
return this.hydrate; this.hydrator = hydrator;
}, opts, this); return this.hydrate;
},
opts,
this
);
} }
hydrate = () => { hydrate = () => {
if (!this.hydrator || this.parentElement?.closest('astro-island[ssr]')) { if (!this.hydrator || this.parentElement?.closest('astro-island[ssr]')) {

View file

@ -11,14 +11,14 @@ import type {
import { escapeHTML, HTMLString, markHTMLString } from './escape.js'; import { escapeHTML, HTMLString, markHTMLString } from './escape.js';
import { extractDirectives, generateHydrateScript } from './hydration.js'; import { extractDirectives, generateHydrateScript } from './hydration.js';
import { serializeProps } from './serialize.js';
import { shorthash } from './shorthash.js';
import { import {
determineIfNeedsHydrationScript, determineIfNeedsHydrationScript,
determinesIfNeedsDirectiveScript, determinesIfNeedsDirectiveScript,
getPrescripts,
PrescriptType, PrescriptType,
getPrescripts
} from './scripts.js'; } from './scripts.js';
import { serializeProps } from './serialize.js';
import { shorthash } from './shorthash.js';
import { serializeListValue } from './util.js'; import { serializeListValue } from './util.js';
export { markHTMLString, markHTMLString as unescapeHTML } from './escape.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! // Note: SVG is case-sensitive!
const svgEnumAttributes = /^(autoReverse|externalResourcesRequired|focusable|preserveAlpha)$/i; const svgEnumAttributes = /^(autoReverse|externalResourcesRequired|focusable|preserveAlpha)$/i;
// INVESTIGATE: // INVESTIGATE:
// 2. Less anys when possible and make it well known when they are needed. // 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]}`; return `${values.slice(0, -1).join(', ')} or ${values[values.length - 1]}`;
} }
export async function renderComponent( export async function renderComponent(
result: SSRResult, result: SSRResult,
displayName: string, displayName: string,
@ -186,7 +184,8 @@ export async function renderComponent(
const { hydration, props } = extractDirectives(_props); const { hydration, props } = extractDirectives(_props);
let html = ''; let html = '';
let needsHydrationScript = hydration && determineIfNeedsHydrationScript(result); let needsHydrationScript = hydration && determineIfNeedsHydrationScript(result);
let needsDirectiveScript = hydration && determinesIfNeedsDirectiveScript(result, hydration.directive); let needsDirectiveScript =
hydration && determinesIfNeedsDirectiveScript(result, hydration.directive);
if (hydration) { if (hydration) {
metadata.hydrate = hydration.directive as AstroComponentMetadata['hydrate']; 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}`; island.children = `${html ?? ''}${template}`;
let prescriptType: PrescriptType = needsHydrationScript ? 'both' : needsDirectiveScript ? let prescriptType: PrescriptType = needsHydrationScript
'directive' : null; ? 'both'
: needsDirectiveScript
? 'directive'
: null;
let prescripts = getPrescripts(prescriptType, hydration.directive); let prescripts = getPrescripts(prescriptType, hydration.directive);
return markHTMLString(prescripts + renderElement('astro-island', island, false)); return markHTMLString(prescripts + renderElement('astro-island', island, false));
} }

View file

@ -1,21 +1,11 @@
import type { import type { SSRResult } from '../../@types/astro';
APIContext,
AstroComponentMetadata,
AstroGlobalPartial,
EndpointHandler,
Params,
SSRElement,
SSRLoadedRenderer,
SSRResult,
} from '../../@types/astro';
import islandScript from './astro-island.prebuilt.js';
import idlePrebuilt from '../client/idle.prebuilt.js'; import idlePrebuilt from '../client/idle.prebuilt.js';
import loadPrebuilt from '../client/load.prebuilt.js'; import loadPrebuilt from '../client/load.prebuilt.js';
import mediaPrebuilt from '../client/media.prebuilt.js';
import onlyPrebuilt from '../client/only.prebuilt.js'; import onlyPrebuilt from '../client/only.prebuilt.js';
import visiblePrebuilt from '../client/visible.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 // 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 // appended. We only add the hydration script once per page, and since the SSRResult
@ -35,29 +25,27 @@ export const hydrationScripts: Record<string, string> = {
load: loadPrebuilt, load: loadPrebuilt,
only: onlyPrebuilt, only: onlyPrebuilt,
media: mediaPrebuilt, media: mediaPrebuilt,
visible: visiblePrebuilt visible: visiblePrebuilt,
}; };
const resultsWithDirectiveScript = new Map<string, WeakSet<SSRResult>>(); const resultsWithDirectiveScript = new Map<string, WeakSet<SSRResult>>();
export function determinesIfNeedsDirectiveScript(result: SSRResult, directive: string): boolean { export function determinesIfNeedsDirectiveScript(result: SSRResult, directive: string): boolean {
if(!resultsWithDirectiveScript.has(directive)) { if (!resultsWithDirectiveScript.has(directive)) {
resultsWithDirectiveScript.set(directive, new WeakSet()); resultsWithDirectiveScript.set(directive, new WeakSet());
} }
const set = resultsWithDirectiveScript.get(directive)!; const set = resultsWithDirectiveScript.get(directive)!;
if(set.has(result)) { if (set.has(result)) {
return false; return false;
} }
set.add(result); set.add(result);
return true; return true;
} }
export type PrescriptType = null | 'both' | 'directive'; export type PrescriptType = null | 'both' | 'directive';
function getDirectiveScriptText(directive: string): string { function getDirectiveScriptText(directive: string): string {
if(!(directive in hydrationScripts)) { if (!(directive in hydrationScripts)) {
throw new Error(`Unknown directive: ${directive}`); throw new Error(`Unknown directive: ${directive}`);
} }
const directiveScriptText = hydrationScripts[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 // This is so that it executes immediate, and when the browser encounters
// an astro-island element the callbacks will fire immediately, causing the JS // an astro-island element the callbacks will fire immediately, causing the JS
// deps to be loaded immediately. // deps to be loaded immediately.
switch(type) { switch (type) {
case 'both': case 'both':
return `<script>${getDirectiveScriptText(directive) + islandScript}</script>`; return `<script>${getDirectiveScriptText(directive) + islandScript}</script>`;
case 'directive': case 'directive':
return `<script>${getDirectiveScriptText(directive)}</script>`; return `<script>${getDirectiveScriptText(directive)}</script>`;

View file

@ -23,12 +23,12 @@ const dt = new Intl.DateTimeFormat('en-us', {
function getPrebuilds(isDev, args) { function getPrebuilds(isDev, args) {
let prebuilds = []; let prebuilds = [];
while(args.includes('--prebuild')) { while (args.includes('--prebuild')) {
let idx = args.indexOf('--prebuild'); let idx = args.indexOf('--prebuild');
prebuilds.push(args[idx + 1]); prebuilds.push(args[idx + 1]);
args.splice(idx, 2); args.splice(idx, 2);
} }
if(prebuilds.length && isDev) { if (prebuilds.length && isDev) {
prebuilds.unshift('--no-minify'); prebuilds.unshift('--no-minify');
} }
return prebuilds; return prebuilds;
@ -74,7 +74,7 @@ export default async function build(...args) {
...config, ...config,
watch: { watch: {
onRebuild(error, result) { onRebuild(error, result) {
if(prebuilds.length) { if (prebuilds.length) {
prebuild(...prebuilds); prebuild(...prebuilds);
} }
const date = dt.format(new Date()); const date = dt.format(new Date());

View file

@ -13,7 +13,7 @@ export default async function prebuild(...args) {
} }
let minify = true; let minify = true;
let minifyIdx = args.indexOf('--no-minify'); let minifyIdx = args.indexOf('--no-minify');
if(minifyIdx !== -1) { if (minifyIdx !== -1) {
minify = false; minify = false;
args.splice(minifyIdx, 1); args.splice(minifyIdx, 1);
} }