michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[ci] format

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/astro/src/runtime/client/hydration-directives.d.ts vendored
View file

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

2
packages/astro/src/runtime/client/idle.ts
View file

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

2
packages/astro/src/runtime/client/load.ts
View file

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

8
packages/astro/src/runtime/client/media.ts
View file

@ -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 });
}
}
};
};

7
packages/astro/src/runtime/client/only.ts
View file

@ -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();
})();
};
};

32
packages/astro/src/runtime/client/visible.ts
View file

@ -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);
}
};

26
packages/astro/src/runtime/server/astro-island.ts
View file

@ -10,7 +10,7 @@ declare const Astro: {
opts: Record<string, any>,
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<string, any>;
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]')) {

20
packages/astro/src/runtime/server/index.ts
View file

@ -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));
}

29
packages/astro/src/runtime/server/scripts.ts
View file

@ -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<string, string> = {
load: loadPrebuilt,
only: onlyPrebuilt,
media: mediaPrebuilt,
visible: visiblePrebuilt
visible: visiblePrebuilt,
};
const resultsWithDirectiveScript = new Map<string, WeakSet<SSRResult>>();
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 `<script>${getDirectiveScriptText(directive) + islandScript}</script>`;
case 'directive':
return `<script>${getDirectiveScriptText(directive)}</script>`;

6
scripts/cmd/build.js
View file

@ -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());

2
scripts/cmd/prebuild.js
View file

@ -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);
}