[ci] format
This commit is contained in:
parent
4916b733c2
commit
f6cdf1202e
11 changed files with 60 additions and 76 deletions
|
@ -10,7 +10,7 @@ declare global {
|
||||||
media: DirectiveLoader;
|
media: DirectiveLoader;
|
||||||
only: DirectiveLoader;
|
only: DirectiveLoader;
|
||||||
visible: DirectiveLoader;
|
visible: DirectiveLoader;
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,4 +9,4 @@
|
||||||
} else {
|
} else {
|
||||||
setTimeout(cb, 200);
|
setTimeout(cb, 200);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
|
@ -4,5 +4,3 @@
|
||||||
await hydrate();
|
await hydrate();
|
||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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]')) {
|
||||||
|
|
|
@ -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));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>`;
|
||||||
|
|
|
@ -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());
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue