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

[ci] yarn format

Browse source
This commit is contained in:
matthewp 2021-07-12 20:28:13 +00:00 committed by GitHub Actions
parent 0340b0f0b1
commit ea7ef71a6e
4 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/wicked-gifts-cover.md
View file

@ -18,15 +18,15 @@ This allows you to define components which, for example, only run on mobile devi
Since Astro components can have expressions, you can move common media queries to a module for sharing. For example here are defining: Since Astro components can have expressions, you can move common media queries to a module for sharing. For example here are defining:
__media.js__ **media.js**
```js ```js
export const MOBILE = "(max-width: 700px)"; export const MOBILE = '(max-width: 700px)';
``` ```
And then you can reference this in your page: And then you can reference this in your page:
__index.astro__ **index.astro**
```jsx ```jsx
import Sidebar from '../components/Sidebar.jsx'; import Sidebar from '../components/Sidebar.jsx';

12
packages/astro/src/compiler/codegen/index.ts
View file

@ -49,7 +49,7 @@ interface CodeGenOptions {
interface HydrationAttributes { interface HydrationAttributes {
method?: 'load' | 'idle' | 'visible' | 'media'; method?: 'load' | 'idle' | 'visible' | 'media';
value?: undefined | string value?: undefined | string;
} }
/** Searches through attributes to extract hydration-rlated attributes */ /** Searches through attributes to extract hydration-rlated attributes */
@ -62,7 +62,7 @@ function findHydrationAttributes(attrs: Record<string, string>): HydrationAttrib
for (const [key, val] of Object.entries(attrs)) { for (const [key, val] of Object.entries(attrs)) {
if (hydrationDirectives.has(key)) { if (hydrationDirectives.has(key)) {
method = key.slice(7) as HydrationAttributes['method']; method = key.slice(7) as HydrationAttributes['method'];
value = val === "true" ? undefined : val; value = val === 'true' ? undefined : val;
} }
} }
@ -226,12 +226,14 @@ function getComponentWrapper(_name: string, hydration: HydrationAttributes, { ur
}; };
let metadata: string = ''; let metadata: string = '';
if(method) { if (method) {
const componentUrl = getComponentUrl(astroConfig, url, pathToFileURL(filename)); const componentUrl = getComponentUrl(astroConfig, url, pathToFileURL(filename));
const componentExport = getComponentExport(); const componentExport = getComponentExport();
metadata = `{ hydrate: "${method}", displayName: "${name}", componentUrl: "${componentUrl}", componentExport: ${JSON.stringify(componentExport)}, value: ${hydration.value || 'null'} }`; metadata = `{ hydrate: "${method}", displayName: "${name}", componentUrl: "${componentUrl}", componentExport: ${JSON.stringify(componentExport)}, value: ${
hydration.value || 'null'
} }`;
} else { } else {
metadata = `{ hydrate: undefined, displayName: "${name}", value: ${hydration.value || 'null'} }` metadata = `{ hydrate: undefined, displayName: "${name}", value: ${hydration.value || 'null'} }`;
} }
return { return {

4
packages/astro/src/frontend/hydrate/media.ts
View file

@ -15,9 +15,9 @@ export default async function onMedia(astroId: string, options: HydrateOptions,
}; };
const mql = matchMedia(options.value!); const mql = matchMedia(options.value!);
if(mql.matches) { if (mql.matches) {
cb(); cb();
} else { } else {
mql.addEventListener('change', cb, {once:true}); mql.addEventListener('change', cb, { once: true });
} }
} }