mirror of https://github.com/sveltejs/svelte
Tan Li Hau
4 years ago
committed by
GitHub
commit
673517ce1d
@ -0,0 +1,24 @@
|
|||||||
|
// This script generates the TypeScript definitions
|
||||||
|
|
||||||
|
const { execSync } = require('child_process');
|
||||||
|
const { readFileSync, writeFileSync } = require('fs');
|
||||||
|
|
||||||
|
execSync('tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly');
|
||||||
|
|
||||||
|
// We need to add these types to the .d.ts files here because if we add them before building, the build will fail,
|
||||||
|
// because the TS->JS transformation doesn't know these exports are types and produces code that fails at runtime.
|
||||||
|
// We can't use `export type` syntax either because the TS version we're on doesn't have this feature yet.
|
||||||
|
|
||||||
|
function modify(path, modifyFn) {
|
||||||
|
const content = readFileSync(path, 'utf8');
|
||||||
|
writeFileSync(path, modifyFn(content));
|
||||||
|
}
|
||||||
|
|
||||||
|
modify(
|
||||||
|
'types/runtime/index.d.ts',
|
||||||
|
content => content.replace('SvelteComponentTyped', 'SvelteComponentTyped, ComponentType, ComponentConstructorOptions, ComponentProps, ComponentEvents')
|
||||||
|
);
|
||||||
|
modify(
|
||||||
|
'types/compiler/index.d.ts',
|
||||||
|
content => content + '\nexport { CompileOptions, ModuleFormat, EnableSourcemap, CssHashGetter } from "./interfaces"'
|
||||||
|
);
|
||||||
@ -0,0 +1,91 @@
|
|||||||
|
/** ----------------------------------------------------------------------
|
||||||
|
This script gets a list of global objects/functions of browser.
|
||||||
|
This process is simple for now, so it is handled without AST parser.
|
||||||
|
Please run `node scripts/globals-extractor.mjs` at the project root.
|
||||||
|
|
||||||
|
see: https://github.com/microsoft/TypeScript/tree/main/lib
|
||||||
|
---------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
import http from 'https';
|
||||||
|
import fs from 'fs';
|
||||||
|
|
||||||
|
const GLOBAL_TS_PATH = './src/compiler/utils/globals.ts';
|
||||||
|
|
||||||
|
// MEMO: add additional objects/functions which existed in `src/compiler/utils/names.ts`
|
||||||
|
// before this script was introduced but could not be retrieved by this process.
|
||||||
|
const SPECIALS = ['global', 'globalThis', 'InternalError', 'process', 'undefined'];
|
||||||
|
|
||||||
|
const get_url = (name) => `https://raw.githubusercontent.com/microsoft/TypeScript/main/lib/lib.${name}.d.ts`;
|
||||||
|
const extract_name = (split) => split.match(/^[a-zA-Z0-9_$]+/)[0];
|
||||||
|
|
||||||
|
const extract_functions_and_references = (name, data) => {
|
||||||
|
const functions = [];
|
||||||
|
const references = [];
|
||||||
|
data.split('\n').forEach(line => {
|
||||||
|
const trimmed = line.trim();
|
||||||
|
const split = trimmed.replace(/[\s+]/, ' ').split(' ');
|
||||||
|
if (split[0] === 'declare' && split[1] !== 'type') {
|
||||||
|
functions.push(extract_name(split[2]));
|
||||||
|
} else if (trimmed.startsWith('/// <reference')) {
|
||||||
|
const matched = trimmed.match(/ lib="(.+)"/);
|
||||||
|
const reference = matched && matched[1];
|
||||||
|
if (reference) references.push(reference);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return { functions, references };
|
||||||
|
};
|
||||||
|
|
||||||
|
const do_get = (url) => new Promise((resolve, reject) => {
|
||||||
|
http.get(url, (res) => {
|
||||||
|
let body = '';
|
||||||
|
res.setEncoding('utf8');
|
||||||
|
res.on('data', (chunk) => body += chunk);
|
||||||
|
res.on('end', () => resolve(body));
|
||||||
|
}).on('error', (e) => {
|
||||||
|
console.error(e.message);
|
||||||
|
reject(e);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetched_names = new Set();
|
||||||
|
const get_functions = async (name) => {
|
||||||
|
const res = [];
|
||||||
|
if (fetched_names.has(name)) return res;
|
||||||
|
fetched_names.add(name);
|
||||||
|
const body = await do_get(get_url(name));
|
||||||
|
const { functions, references } = extract_functions_and_references(name, body);
|
||||||
|
res.push(...functions);
|
||||||
|
const chile_functions = await Promise.all(references.map(get_functions));
|
||||||
|
chile_functions.forEach(i => res.push(...i));
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
|
||||||
|
const build_output = (functions) => {
|
||||||
|
const sorted = Array.from(new Set(functions.sort()));
|
||||||
|
return `\
|
||||||
|
/** ----------------------------------------------------------------------
|
||||||
|
This file is automatically generated by \`scripts/globals-extractor.mjs\`.
|
||||||
|
Generated At: ${new Date().toISOString()}
|
||||||
|
---------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
export default new Set([
|
||||||
|
${sorted.map((i) => `\t'${i}'`).join(',\n')}
|
||||||
|
]);
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const get_exists_globals = () => {
|
||||||
|
const regexp = /^\s*["'](.+)["'],?\s*$/;
|
||||||
|
return fs.readFileSync(GLOBAL_TS_PATH, 'utf8')
|
||||||
|
.split('\n')
|
||||||
|
.filter(line => line.match(regexp))
|
||||||
|
.map(line => line.match(regexp)[1]);
|
||||||
|
};
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
const globals = get_exists_globals();
|
||||||
|
const new_globals = await get_functions('es2021.full');
|
||||||
|
globals.forEach((g) => new_globals.push(g));
|
||||||
|
SPECIALS.forEach((g) => new_globals.push(g));
|
||||||
|
fs.writeFileSync(GLOBAL_TS_PATH, build_output(new_globals));
|
||||||
|
})();
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
---
|
||||||
|
title: "What's new in Svelte: June 2022"
|
||||||
|
description: "Cancellable dispatched events, deeper {@const} declarations and more!"
|
||||||
|
author: Daniel Sandoval
|
||||||
|
authorURL: https://desandoval.net
|
||||||
|
---
|
||||||
|
|
||||||
|
With last month's [Svelte Summit](https://www.youtube.com/watch?v=qqj2cBockqE) behind us, we're ready to apply everything we learned in this new month of June! Also new this month are some quality-of-life changes to `createEventDispatcher`, `@const` declarations and tons of progress toward SvelteKit 1.0.
|
||||||
|
|
||||||
|
Let's dive in!
|
||||||
|
|
||||||
|
## What's new in Svelte
|
||||||
|
- Custom events can now be cancelled in the `createEventDispatcher` function (**3.48.0**, [Docs](https://svelte.dev/docs#run-time-svelte-createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
|
||||||
|
- The `{@const}` tag can now be used in `{#if}` blocks to conditionally define variables (**3.48.0**, [Docs](https://svelte.dev/docs#template-syntax-const), [PR](https://github.com/sveltejs/svelte/pull/7451))
|
||||||
|
- Lots of bug fixes across `<svelte:element>`, animations and various DOM elements. Check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3480) for a deeper dive!
|
||||||
|
|
||||||
|
|
||||||
|
## What's new in SvelteKit
|
||||||
|
- Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever ([Vite 3.0 Milestone](https://github.com/vitejs/vite/milestone/5))
|
||||||
|
- `config.kit.alias` lets you more easily declare a custom alias to replace values in `import` statements ([Docs](https://kit.svelte.dev/docs/configuration#alias), [PR](https://github.com/sveltejs/kit/pull/4964))
|
||||||
|
- Pages marked for prerendering will now fail during SSR at runtime ([PR](https://github.com/sveltejs/kit/pull/4812))
|
||||||
|
|
||||||
|
**Breaking Changes**
|
||||||
|
- Node 14 is no longer supported ([PR](https://github.com/sveltejs/kit/pull/4922))
|
||||||
|
- Requests to `/favicon.ico` will no longer be suppressed and will instead be handled as a valid route ([PR](https://github.com/sveltejs/kit/pull/5046))
|
||||||
|
- AMP support has been moved to a separate `@sveltejs/amp` package ([Docs](https://kit.svelte.dev/docs/seo#manual-setup-amp), [PR](https://github.com/sveltejs/kit/pull/4710))
|
||||||
|
- Generated types are now written to `_types` directories - update your imports accordingly ([PR](https://github.com/sveltejs/kit/pull/4705))
|
||||||
|
- `%svelte.head%` and `%svelte.body%` are now `%sveltekit.head%` and `%sveltekit.body%` in `app.html` ([Docs](https://kit.svelte.dev/docs/migrating#project-files-src-template-html), [PR](https://github.com/sveltejs/kit/pull/5016/))
|
||||||
|
- `LoadInput` is now `LoadEvent`
|
||||||
|
- Dropped support for Wrangler 1 in favor of Wrangler 2 ([PR](https://github.com/sveltejs/kit/pull/4887))
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Community Showcase
|
||||||
|
|
||||||
|
**Apps & Sites built with Svelte**
|
||||||
|
- [Plantarium](https://github.com/jim-fx/plantarium) is a tool for the procedural generation of 3D plants.
|
||||||
|
- [SPATULA](https://github.com/AlexWarnes/lamina-spatula) is a tool for building shading materials that are exportable as code material in any project that uses lamina and threejs
|
||||||
|
- [Waaard](https://waaard.com/) lets you create and send protected links with a variety of SSO providers
|
||||||
|
- [Magidoc](https://github.com/magidoc-org/magidoc) is a fast and highly customizable GraphQL documentation generator
|
||||||
|
- [myMarkmap](https://github.com/eyssette/myMarkmap) is a custom editor for Markmap, built with SvelteKit
|
||||||
|
- [PassShare](https://passshare.mynt.pw/) is a way for you to share your passwords to your friends, securely and effortlessly
|
||||||
|
- [DashingOS](https://beta.dashingos.com/) is a tool (like Notion + CodeSandbox) to make it quick and easy to prototype and document your work all in one place
|
||||||
|
- [worker-kit-email](https://github.com/miunau/worker-kit-email) helps you develop transactional emails quickly using regular SvelteKit routes
|
||||||
|
- [kaios-weather-svelte](https://github.com/cyan-2048/kaios-weather-svelte) is a very familiar looking weather app for KaiOS
|
||||||
|
- [svelte-gantt](https://github.com/ANovokmet/svelte-gantt) is a lightweight and fast interactive gantt chart/resource booking component
|
||||||
|
- [Miru](https://github.com/ThaUnknown/miru) is a BitTorrent streaming software for cats
|
||||||
|
|
||||||
|
Looking for a great SvelteKit website to contribute to? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
|
||||||
|
|
||||||
|
|
||||||
|
**Learning Resources**
|
||||||
|
|
||||||
|
_To Read_
|
||||||
|
- [Component party](https://component-party.dev/) is a site that compares common patterns in different frameworks
|
||||||
|
- [Quick tip: style prop defaults](https://geoffrich.net/posts/style-prop-defaults/) by Geoff Rich
|
||||||
|
- [Working with reduced motion in Svelte](https://ghostdev.xyz/posts/working-with-reduced-motion-in-svelte) by GHOST
|
||||||
|
- [Building a Musical Instrument with the Web Audio API](https://www.taniarascia.com/musical-instrument-web-audio-api/) by Tania Rascia
|
||||||
|
- [Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices](https://dev.to/alexwarnes/svelte-cubed-creating-an-accessible-and-consistent-experience-across-devices-42ae) and [Svelte-Cubed: Loading Your glTF Models](https://dev.to/alexwarnes/svelte-cubed-loading-your-gltf-models-14lf) by Alex Warnes
|
||||||
|
|
||||||
|
_To Watch_
|
||||||
|
|
||||||
|
From Svelte Society:
|
||||||
|
- [The Svelte Summit Spring 2022 stream recording](https://www.youtube.com/watch?v=qqj2cBockqE) has been updated with chapter markers to make it easy to watch again and again
|
||||||
|
- [The full recording of Svelte London, April 2022](https://www.youtube.com/watch?v=zIxzJzTnoxA) is up! Check out the amazing talks from across the Svelte London community
|
||||||
|
- [Persian Svelte Society](https://www.youtube.com/channel/UCfWH9lCsXN3j8oXq8dru82Q) is making Persian-language videos about Svelte
|
||||||
|
- Svelte Sirens has been talking monthly to creators and contributors across the Svelte Community:
|
||||||
|
- [SvelteKit + Sanity.io: a match made in heaven](https://www.youtube.com/watch?v=j0_1hfiEVWA&list=PL8bMgX1kyZThkJ_Rk6AAFI4eY24g5XKwK&index=5) on May 13
|
||||||
|
- [Slicing up your Svelte Sites with Prismic](https://www.youtube.com/watch?v=FUbHwwMALkk) on May 20
|
||||||
|
- [Rendering your Svelte apps on Render](https://www.youtube.com/watch?v=SnV_hMLVyqs) on May 24
|
||||||
|
- [The story behind the (unofficial) Svelte newsletter](https://www.youtube.com/watch?v=aK0xXm3hPxk&list=PL8bMgX1kyZThkJ_Rk6AAFI4eY24g5XKwK&index=7) on May 27
|
||||||
|
|
||||||
|
|
||||||
|
Across the Web:
|
||||||
|
- [Building vite-plugin-svelte-inspector](https://www.youtube.com/watch?v=udYB24IMtsY), [What is Singleton?](https://www.youtube.com/watch?v=xhi0m1QZue0) and [What is Navigation?](https://www.youtube.com/watch?v=Ym-OnGUps2c) by lihautan
|
||||||
|
- [Auto Import Components In Svelte Kit - Weekly Svelte](https://www.youtube.com/watch?v=JXvKBtTPr64) by LevelUpTuts
|
||||||
|
- [🧪 Test SvelteKit with TDD & VITEST 🧪](https://www.youtube.com/watch?v=5bQD3dCoyHA) by Johnny Magrippis
|
||||||
|
- [Google Analytics With SvelteKit](https://www.youtube.com/watch?v=l-x6H0fnqqQ), [Using WebSockets With SvelteKit](https://www.youtube.com/watch?v=mAcKzdW5fR8), [SvelteKit Authentication Using Cookies](https://www.youtube.com/watch?v=T935Ya4W5X0) and [Svelte Headless UI Component Library](https://www.reddit.com/r/sveltejs/comments/ueu849/svelte_headless_ui_component_library/) by Joy of Code
|
||||||
|
- [Named Layouts In Nested Routes in SvelteKit](https://www.youtube.com/watch?v=hKg_V3jouLk) by The Svelte Junction
|
||||||
|
- [SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks](https://rodneylab.com/sveltekit-shiki-syntax-highlighting/) and [Svelte Capsize Styling: Typography Tooling](https://rodneylab.com/svelte-capsize-styling/) by Rodney Lab
|
||||||
|
|
||||||
|
_To Hear_
|
||||||
|
- Svelte Radio has been putting out weekly episodes:
|
||||||
|
- [The Adventures of Running a Svelte Meetup](https://www.svelteradio.com/episodes/the-adventures-of-running-a-svelte-meetup)
|
||||||
|
- [The other Rich! Geoff! (feat. Geoff Rich)](https://www.svelteradio.com/episodes/the-other-rich-geoff)
|
||||||
|
- [Inspecting Svelte Code with Dominik G.](https://www.svelteradio.com/episodes/inspecting-svelte-code-with-dominik-g)
|
||||||
|
- [Stores Galore](https://www.svelteradio.com/episodes/stores-galore)
|
||||||
|
- [Svelte and the Future of Frontend Development (feat. Rich Harris)](https://thenewstack.io/svelte-and-the-future-of-front-end-development/) from The New Stack
|
||||||
|
|
||||||
|
|
||||||
|
**Libraries, Tools & Components**
|
||||||
|
- [vite-plugin-svelte-console-remover](https://github.com/jhubbardsf/vite-plugin-svelte-console-remover) is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don't leak into production
|
||||||
|
- [Svelte Headless Tables](https://github.com/bryanmylee/svelte-headless-table) is an unopinionated and extensible data tables for Svelte
|
||||||
|
- [y-presence](https://github.com/nimeshnayaju/y-presence) is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
|
||||||
|
- [Svelcro](https://github.com/oslabs-beta/Svelcro) is a component performance tracker for Svelte applications
|
||||||
|
- [Svelte-Splitpanes](https://github.com/orefalo/svelte-splitpanes) lets you create dynamic and predictable view panels to layout an application
|
||||||
|
- [svelte-miniplayer](https://github.com/ThaUnknown/svelte-miniplayer) is a lightweight, fast, resizable and draggable miniplayer for media
|
||||||
|
- [svelte-keybinds](https://github.com/ThaUnknown/svelte-keybinds) is a minimalistic keybinding interface, with rebinding and saving
|
||||||
|
- [svelte-speech-recognition](https://github.com/jhubbardsf/svelte-speech-recognition) converts speech from the microphone to text and makes it available to your Svelte components
|
||||||
|
|
||||||
|
**Special Feature: Svelte Stores**
|
||||||
|
There were lots of Svelte stores released this month from a number of authors...
|
||||||
|
|
||||||
|
- [svelte-mutable-store](https://github.com/feltcoop/svelte-mutable-store) is a Svelte store for mutable values with the `immutable` compiler option
|
||||||
|
- [svelte-damped-store](https://github.com/aredridel/svelte-damped-store) is a derived writable store that can suspend updates while [svelte-lens-store](https://github.com/aredridel/svelte-lens-store) is a functional lens over Svelte stores
|
||||||
|
- [svelte-persistent-store](https://github.com/furudean/svelte-persistent-store) is a writable svelte store that saves and loads data from `Window.localStorage` or `Window.sessionStorage`.
|
||||||
|
|
||||||
|
|
||||||
|
Did we miss anything? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to add your voice.
|
||||||
|
|
||||||
|
Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! [Get your tickets now](https://ti.to/svelte/svelte-summit-fall-edition).
|
||||||
|
|
||||||
|
See y'all next month!
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
---
|
||||||
|
title: "What's new in Svelte: July 2022"
|
||||||
|
description: "Faster SSR, language tools improvements and a new paid contributor!"
|
||||||
|
author: Daniel Sandoval
|
||||||
|
authorURL: https://desandoval.net
|
||||||
|
---
|
||||||
|
|
||||||
|
From faster SSR to support for Vitest and Storybook in SvelteKit, there's a lot to cover in this month's newsletter...
|
||||||
|
|
||||||
|
So let's dive in!
|
||||||
|
|
||||||
|
## OpenCollective funding drives Svelte forward
|
||||||
|
|
||||||
|
Svelte supporters have donated approximately $80,000 to [the project on OpenCollective](https://opencollective.com/svelte). We're happy to share that the funds are being drawn on to move Svelte forward in a meaningful way. **[@gtm-nayan](https://github.com/gtm-nayan)** has begun triaging and fixing SvelteKit issues this past month as a paid contributor to the project to help us get SvelteKit to a 1.0 level of stability! @gtm-nayan has been an active member of the Svelte community for quite some time and is well known for writing the bot that helps keep our Discord server running. We're happy that this funding has allowed Svelte to get much more of his time.
|
||||||
|
|
||||||
|
We will also be utilizing OpenCollective funds to allow Svelte core maintainers to attend [Svelte Summit](https://www.sveltesummit.com/) in person this fall. Thanks to everyone who has donated so far!
|
||||||
|
|
||||||
|
## What's new in Svelte & Language Tools
|
||||||
|
- [learn.svelte.dev](https://learn.svelte.dev/) is a new way to learn Svelte and SvelteKit from the ground up that is currently in development
|
||||||
|
- Faster SSR is coming in the next Svelte release. A PR two years in the making, resulting in up to 3x faster rendering in some benchmarking tests! ([PR](https://github.com/sveltejs/svelte/pull/5701))
|
||||||
|
- "Find File References" ([0.14.28](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.28)) and "Find Component References" ([0.14.29](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.29)) in the latest versions of the Svelte extension shows where Svelte files and components have been imported and used ([Demo](https://twitter.com/dummdidumm_/status/1532459709604716544/photo/1))
|
||||||
|
- The Svelte extension now supports CSS path completion ([0.14.29](https://github.com/sveltejs/language-tools/releases/tag/language-server-0.14.29))
|
||||||
|
|
||||||
|
|
||||||
|
## What's new in SvelteKit
|
||||||
|
- Introduced `@sveltejs/kit/experimental/vite` which allows SvelteKit to interoperate with other tools in the Vite ecosystem like Vitest and Storybook ([#5094](https://github.com/sveltejs/kit/pull/5094)). Please [leave feedback](https://github.com/sveltejs/kit/issues/5184) as to whether the feature works and is helpful as we consider taking it out of experimental and making `vite.config.js` required for all users
|
||||||
|
- Streaming in endpoints is now supported ([#3419](https://github.com/sveltejs/kit/issues/3419)). This was enabled by switching to the Undici `fetch` implementation ([#5117](https://github.com/sveltejs/kit/pull/5117))
|
||||||
|
- Static assets can now be symlinked in development environments ([#5089](https://github.com/sveltejs/kit/pull/5089))
|
||||||
|
- `server` and `prod` environment variables are now available as a correlary to `browser` and `dev` ([#5251](https://github.com/sveltejs/kit/pull/5251))
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Community Showcase
|
||||||
|
|
||||||
|
**Apps & Sites built with Svelte**
|
||||||
|
- [Virtual Maker](https://www.virtualmaker.net/) lets you make interactive 3D and VR scenes in your browser
|
||||||
|
- [Apple Beta Music](https://www.reddit.com/r/sveltejs/comments/v7ic2s/apple_beta_music_uses_svelte/) appears to have been written in some combination of Svelte and web components
|
||||||
|
- [Itatiaia](https://www.itatiaia.com.br/), the largest radio station in the country of Brazil just relaunched its news portal in SvelteKit
|
||||||
|
- [Pronauns](https://www.pronauns.com) helps you learn pronunciation online with IPA to speak better and sound more native
|
||||||
|
- [Immich](https://www.immich.app/) is an open source, high performance self-hosted backup solution for videos and photos on your mobile phone
|
||||||
|
- [Pendek](https://github.com/leovoon/link-shortener) is a link shortener built with SvelteKit, Prisma and PlanetScale
|
||||||
|
- [Grunfy](https://grunfy.com/tools) is a set of guitar tools - recently migrated to SvelteKit
|
||||||
|
- [Radiant: The Future of Radio](https://play.google.com/store/apps/details?id=co.broadcastapp.Radiant) is a personal radio station app built with Svelte and Capacitor
|
||||||
|
- [Imperfect Reminders](https://imperfectreminders.mildlyupset.com/) is a todo list for things that are only sort of time sensitive
|
||||||
|
- [Periodic Table](https://github.com/janosh/periodic-table) is a dynamic Periodic Table component written in Svelte
|
||||||
|
- [Svelvet](https://github.com/open-source-labs/Svelvet) is a lightweight Svelte component library for building interactive node-based diagrams
|
||||||
|
- [publint](https://github.com/bluwy/publint) lints for packaging errors to ensure compatibility across environments
|
||||||
|
- [Playlistr](https://github.com/alextana/spotify-playlist-creator) helps manage and create Spotify playlists
|
||||||
|
- [Geoff Rich's page transitions demo](https://twitter.com/geoffrich_/status/1534980702785003520) shows how SvelteKit's `beforeNavigate`/`afterNavigate` hooks can make smooth document transitions in the latest Chrome Canary
|
||||||
|
- [Menger Sponge](https://twitter.com/a_warnes/status/1536215896078811137) is a fractal built with Threlte
|
||||||
|
|
||||||
|
Want to contribute to a site using the latest SvelteKit features? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
|
||||||
|
|
||||||
|
|
||||||
|
**Learning Resources**
|
||||||
|
|
||||||
|
_Starring the Svelte team_
|
||||||
|
- [Svelte Origins: A JavaScript Documentary](https://www.youtube.com/watch?v=kMlkCYL9qo0) by OfferZen Origins
|
||||||
|
- [Full Stack Documentation (announcing learn.svelte.dev)](https://portal.gitnation.org/contents/full-stack-documentation) by Rich Harris @ JSNation 2022
|
||||||
|
- [All About the Sirens](https://www.svelteradio.com/episodes/all-about-the-sirens) by Svelte Radio
|
||||||
|
|
||||||
|
_To Watch_
|
||||||
|
- [SvelteKit Page Endpoints](https://www.youtube.com/watch?v=yQRf2wmTu5w), [Named Layouts](https://www.youtube.com/watch?v=UHX9TJ0BxZY) and [Passing data from page component to layout component with $page.stuff](https://www.youtube.com/watch?v=CXaCstU5pcw) by lihautan
|
||||||
|
- [🍞 & 🧈: Magically load data with SvelteKit Endpoints](https://www.youtube.com/watch?v=f6prqYlbTE4) by Johnny Magrippis
|
||||||
|
- [Svelte for React developers](https://www.youtube.com/watch?v=7tsrwrx5HtQ) by frontendtier
|
||||||
|
- [Learn Svelte JS || Javascript Compiler for Building Front end Applications](https://www.youtube.com/watch?v=1rKRarJJFrY&list=PLIGDNOJWiL1-7zCgdR7MKuho-tPC6Ra6C&index=1) by Code with tsksharma
|
||||||
|
- [SvelteKit Authentication](https://www.youtube.com/watch?v=T935Ya4W5X0&list=PLA9WiRZ-IS_zKrDzhOhV5RGKKTHNIyTDO&index=1) by Joy of Code
|
||||||
|
- [Svelte + websockets: Build a real-time Auction app](https://www.youtube.com/watch?v=CqgsWFrwQIU) by Evgeny Maksimov
|
||||||
|
|
||||||
|
_To Read_
|
||||||
|
- [Up-To-Date Analytics on a Static Website](https://paullj.github.io/posts/up-to-date-analytics-on-a-static-website) and [Fast, Lightweight Fuzzy Search using Fuse.js](https://paullj.github.io/posts/fast-lightweight-fuzzy-search-using-fuse.js) by paullj
|
||||||
|
- [Use SvelteKit as a handler in the ExpressJs project](https://chientrm.medium.com/use-sveltekit-as-a-handler-in-the-expressjs-project-15524b01128f) by Tran Chien
|
||||||
|
- [Creating a desktop application with Tauri and SvelteKit](https://github.com/Stijn-B/tauri-sveltekit-example) by Stijn-B
|
||||||
|
- [List of awesome Svelte stores](https://github.com/samuba/awesome-svelte-stores) by samuba
|
||||||
|
- [SvelteKit Content Security Policy: CSP for XSS Protection](https://rodneylab.com/sveltekit-content-security-policy/) by Rodney Lab
|
||||||
|
- [SvelteKit Hooks. Everything You Need To Know](https://kudadam.com/blog/understanding-sveltekit-hooks) by Lucretius K. Biah
|
||||||
|
- [3 tips for upgrading the performance of your Svelte stores](https://www.mathiaspicker.com/posts/3-tips-for-upgrading-the-performance-of-your-svelte-stores) by Mathias Picker
|
||||||
|
|
||||||
|
|
||||||
|
**Libraries, Tools & Components**
|
||||||
|
- [Svend3r](https://github.com/oslabs-beta/svend3r) is a plug and play D3 charting library for Svelte
|
||||||
|
- [Svelte Hover Draw SVG](https://github.com/davipon/svelte-hover-draw-svg) is a lightweight Svelte component to draw SVG on hover
|
||||||
|
- [Svelte French Toast](https://svelte-french-toast.com/) provides buttery smooth toast notifications that are lightweight, customizable, and beautiful by default
|
||||||
|
- [SVooltip](https://svooltip.vercel.app/) is a basic Svelte tooltip directive, powered by Floating UI
|
||||||
|
- [Svelte Brick Gallery](https://github.com/anotherempty/svelte-brick-gallery) is a masonry-like image gallery component for Svelte
|
||||||
|
- [use-vest](https://github.com/enyo/use-vest) is a Svelte action for Vest - a library that makes it easy to validate forms and show errors when necessary
|
||||||
|
- [Svelidate](https://github.com/svelidate/svelidate) is a simple and lightweight form validation library for Svelte with no dependencies
|
||||||
|
- [Svve11](https://github.com/oslabs-beta/Svve11) is an "accessbility-first" component library for Svelte
|
||||||
|
- [Slidy](https://github.com/Valexr/Slidy) is a simple, configurable & reusable carousel sliding action script with templates & some useful plugins
|
||||||
|
- [Svelte Component Snippets](https://marketplace.visualstudio.com/items?itemName=brysonbw.svelte-component-snippets) is a VS Code extension with access to common Svelte snippets
|
||||||
|
- [Svelte Confetti](https://github.com/Mitcheljager/svelte-confetti) adds a little bit of flair to your app with some confetti 🎊
|
||||||
|
|
||||||
|
|
||||||
|
What did we miss? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to add your voice.
|
||||||
|
|
||||||
|
Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! [Get your tickets now](https://www.sveltesummit.com/).
|
||||||
|
|
||||||
|
See y'all next month!
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
title: "What's new in Svelte: August 2022"
|
||||||
|
description: "Changes to SvelteKit's `load` before 1.0 plus support for Vite 3 and `vite.config.js`!"
|
||||||
|
author: Daniel Sandoval
|
||||||
|
authorURL: https://desandoval.net
|
||||||
|
---
|
||||||
|
|
||||||
|
There's a lot to cover this month... big changes are coming to SvelteKit's design before 1.0 can be completed. If you haven't already, check out Rich's Discussion, [Fixing `load`, and tightening up SvelteKit's design before 1.0 #5748](https://github.com/sveltejs/kit/discussions/5748).
|
||||||
|
|
||||||
|
Also, [@dummdidumm](https://github.com/dummdidumm) (Simon H) [has joined Vercel to work on Svelte full-time](https://twitter.com/dummdidumm_/status/1549041206348222464) and [@tcc-sejohnson](https://github.com/tcc-sejohnson) has joined the group of SvelteKit maintainers! We're super excited to have additional maintainers now dedicated to working on Svelte and SvelteKit and have already been noticing their impact. July was the third largest month for SvelteKit changes since its inception!
|
||||||
|
|
||||||
|
Now onto the rest of the updates...
|
||||||
|
|
||||||
|
## What's new in SvelteKit
|
||||||
|
- Dynamically imported styles are now included during SSR ([#5138](https://github.com/sveltejs/kit/pull/5138))
|
||||||
|
- Improvements to routes and prop updates to prevent unnecessary rerendering ([#5654](https://github.com/sveltejs/kit/pull/5654), [#5671](https://github.com/sveltejs/kit/pull/5671))
|
||||||
|
- Lots of improvements to error handling ([#4665](https://github.com/sveltejs/kit/pull/4665), [#5622](https://github.com/sveltejs/kit/pull/5622), [#5619](https://github.com/sveltejs/kit/pull/5619), [#5616](https://github.com/sveltejs/kit/pull/5616))
|
||||||
|
- Custom Vite modes are now respected in SSR builds ([#5602](https://github.com/sveltejs/kit/pull/5602))
|
||||||
|
- Custom Vite config locations are now supported ([#5705](https://github.com/sveltejs/kit/pull/5705))
|
||||||
|
- Private environment variables (aka "secrets") are now much more secure. Now if you accidentally import them to client-side code, you'll see an error ([#5663](https://github.com/sveltejs/kit/pull/5663), [Docs](https://kit.svelte.dev/docs/configuration#env))
|
||||||
|
- Vercel's v3 build output API is now being used in `adapter-vercel` ([#5514](https://github.com/sveltejs/kit/pull/5514))
|
||||||
|
- `vite-plugin-svelte` has reached 1.0 and now supports Vite 3. You'll notice new default ports for `dev` (port 5173) and `preview` (port 4173) ([#5005](https://github.com/sveltejs/kit/pull/5005), [vite-plugin-svelte CHANGELOG](https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md))
|
||||||
|
|
||||||
|
**Breaking changes:**
|
||||||
|
- `mode`, `prod` and `server` are no longer available in `$app/env` ([#5602](https://github.com/sveltejs/kit/pull/5602))
|
||||||
|
- `svelte-kit` CLI commands are now run using the `vite` command and `vite.config.js` is required. This will allow first-class support with other projects in the Vite ecosystem like Vitest and Storybook ([#5332](https://github.com/sveltejs/kit/pull/5332), [Docs](https://kit.svelte.dev/docs/project-structure#project-files-vite-config-js))
|
||||||
|
- `endpointExtensions` is now `moduleExtensions` and can be used to filter param matchers ([#5085](https://github.com/sveltejs/kit/pull/5085), [Docs](https://kit.svelte.dev/docs/configuration#moduleextensions))
|
||||||
|
- Node 16.9 is now the minimum version for SvelteKit ([#5395](https://github.com/sveltejs/kit/pull/5395))
|
||||||
|
- %-encoded filenames are now allowed. If you had a `%` in your route, you must now encode it with `%25` ([#5056](https://github.com/sveltejs/kit/pull/5056))
|
||||||
|
- Endpoint method names are now uppercased to match HTTP specifications ([#5513](https://github.com/sveltejs/kit/pull/5513), [Docs](https://kit.svelte.dev/docs/routing#endpoints))
|
||||||
|
- `writeStatic` has been removed to align with Vite's config ([#5618](https://github.com/sveltejs/kit/pull/5618))
|
||||||
|
- `transformPage` is now `transformPageChunk` ([#5657](https://github.com/sveltejs/kit/pull/5657), [Docs](https://kit.svelte.dev/docs/hooks#handle))
|
||||||
|
- The `prepare` script is no longer needed in `package.json` ([#5760](https://github.com/sveltejs/kit/pull/5760))
|
||||||
|
- `adapter-node` no longer does any compression while we wait for a [bug fix in the `compression` library](https://github.com/expressjs/compression/pull/183) ([#5560](https://github.com/sveltejs/kit/pull/5506))
|
||||||
|
|
||||||
|
For a full list of changes, check out kit's [CHANGELOG](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
|
||||||
|
|
||||||
|
|
||||||
|
## What's new in Svelte & Language Tools
|
||||||
|
- The `@layer` [CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) is now supported in Svelte components (**3.49.0**, [PR](https://github.com/sveltejs/svelte/issues/7504))
|
||||||
|
- The `inert` [HTML attribute](https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute) is now supported in Svelte's language tools and plugins (**105.20.0**, [PR](https://github.com/sveltejs/language-tools/pull/1565))
|
||||||
|
- The Svelte plugin will now use `SvelteComponentTyped` typings, if available (**105.19.0**, [PR](https://github.com/sveltejs/language-tools/pull/1548))
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Community Showcase
|
||||||
|
|
||||||
|
**Apps & Sites built with Svelte**
|
||||||
|
- [PocketBase](https://github.com/pocketbase/pocketbase) is an open source Go backend with a single file and an admin dashboard built with Svelte
|
||||||
|
- [Hondo](https://www.playhondo.com/how-to-play) is a word guessing game with multiple rounds
|
||||||
|
- [Hexapipes](https://github.com/gereleth/hexapipes) is a site for playing hexagonal pipes puzzle
|
||||||
|
- [Mail Must Move](https://www.mordon.app/) is an email made for those who want to get more done
|
||||||
|
- [Jot Down](https://github.com/brysonbw/vscode-jot-down) is a Visual Studio Code extension for quick and simple note taking
|
||||||
|
- [Kadium](https://kadium.kasper.space/) is an app for staying on top of YouTube channels' uploads
|
||||||
|
- [Samen zjin we #1metS10](https://1mets10.avrotros.nl/) is a campaign website to support S10, the dutch Eurovision finalist, by sending a drawing or a wish
|
||||||
|
- [On Writing Code](https://onwritingcode.com/) is an interactive website to learn programming design patterns
|
||||||
|
- [Svelte-In-Motion](https://github.com/novacbn/svelte-in-motion) lets you create Svelte-animated videos in your browser
|
||||||
|
- [Svelte Terminal](https://github.com/Nico-Mayer/svelte-terminal) is a terminal-like website
|
||||||
|
- [Bulletlist](https://bulletlist.com/) is a simple tool with a single purpose: making lists
|
||||||
|
- [Remind Me Again](https://github.com/probablykasper/remind-me-again) is an app for toggleable reminders on Mac, Linux and Windows
|
||||||
|
- [Heyweek](https://heyweek.com/) is a timetracking app built for freelancers craving that extra pizzazz
|
||||||
|
|
||||||
|
**Learning Resources**
|
||||||
|
|
||||||
|
_Starring the Svelte team_
|
||||||
|
- [The Svelte Documentary is out!](https://www.svelteradio.com/episodes/the-svelte-documentary-is-out) on Svelte Radio
|
||||||
|
- [Beginner SvelteKit](https://vercel.com/docs/beginner-sveltekit) by Vercel
|
||||||
|
- [Challenge: Explore Svelte by Building a Bubble Popping Game](https://prismic.io/blog/try-svelte-build-game) by Brittney Postma
|
||||||
|
- [Let's write a Client-side Routing Library with Svelte](https://www.youtube.com/watch?v=3foVDSknGEY) by lihautan
|
||||||
|
- [Svelte Sirens July Talk - Testing in Svelte with Jess Sachs](https://sveltesirens.dev/event/testing-in-svelte)
|
||||||
|
|
||||||
|
_To Watch_
|
||||||
|
- [10 Awesome Svelte UI Component Libraries](https://www.youtube.com/watch?v=RkD88ARvucM) by LevelUpTuts
|
||||||
|
- [Learn How SvelteKit Works](https://www.youtube.com/watch?v=VizuTy3uSNE) and [SvelteKit Endpoints](https://www.youtube.com/watch?v=XnVxDLTgCgo) by Joy of Code
|
||||||
|
- [SvelteKit using TS, and Storybook setup](https://www.youtube.com/watch?v=L4F5dSu0FcQ) by Jarrod Kane
|
||||||
|
- [Building Apps with Svelte!](https://www.youtube.com/watch?v=prsXVk1fdW4) by Simon Grimm
|
||||||
|
- [SvelteKit authentication, the better way - Tutorial](https://www.youtube.com/watch?v=Y98KipzwVdM) by Pilcrow
|
||||||
|
|
||||||
|
_To Read_
|
||||||
|
- [Some assorted Svelte demos](https://geoffrich.net/posts/assorted-svelte-demos/) by Geoff Rich
|
||||||
|
- [Three ways to bootstrap a Svelte project](https://maier.tech/posts/three-ways-to-bootstrap-a-svelte-project) by Thilo Maier
|
||||||
|
- [Design & build an app with Svelte](https://bootcamp.uxdesign.cc/design-build-an-app-with-svelte-ecd7ed0729da) by Hugo
|
||||||
|
- [Define routes via JS in SvelteKit](https://dev.to/maxcore/define-routes-via-js-in-sveltekit-27e9) by Max Core
|
||||||
|
- [Integrating Telegram api with SvelteKit](https://dev.to/theether0/integrating-telegram-api-with-sveltekit-5gb) by Shivam Meena
|
||||||
|
- [SvelteKit SSG: how to Prerender your SvelteKit Site](https://rodneylab.com/sveltekit-ssg/) by Rodney Lab
|
||||||
|
- [ADEO Design System: Building a Web Component library with Svelte and Rollup](https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163) by Mohamed Mokhtari
|
||||||
|
- [The Svelte Handbook](https://thevalleyofcode.com/svelte/) by The Valley of Code
|
||||||
|
- [Test Svelte Component Using Vitest & Playwright](https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright) by David Peng
|
||||||
|
- [Transitional Apps with Phoenix and Svelte](https://nathancahill.com/phoenix-svelte) by Nathan Cahill
|
||||||
|
|
||||||
|
_Tech Demos_
|
||||||
|
- [Bringing the best GraphQL experience to Svelte](https://www.the-guild.dev/blog/houdini-and-kitql) by The Guild
|
||||||
|
- [Style your Svelte website faster with Stylify CSS](https://stylifycss.com/blog/style-your-svelte-website-faster-with-stylify-css/) by Stylify
|
||||||
|
- [Revamped Auth Helpers for Supabase (with SvelteKit support)](https://supabase.com/blog/2022/07/13/supabase-auth-helpers-with-sveltekit-support) by Supabase
|
||||||
|
|
||||||
|
|
||||||
|
**Libraries, Tools & Components**
|
||||||
|
- [Lucia](https://github.com/pilcrowOnPaper/lucia-sveltekit) is a simple, JWT based authentication library for SvelteKit that connects your SvelteKit app with your database
|
||||||
|
- [Skeleton](https://github.com/Brain-Bones/skeleton) is a UI component library for use with Svelte + Tailwind
|
||||||
|
- [pass-composer](https://pass-composer.vercel.app/) helps you compose your postprocessing passes for threlte scenes
|
||||||
|
- [@crikey/stores-*](https://whenderson.github.io/stores-mono/) is a collection of libraries to extend Svelte stores for common use-cases
|
||||||
|
- [Svelte Chrome Storage](https://github.com/shaun-wild/svelte-chrome-storage) is a lightweight abstraction between Svelte stores and Chrome extension storage
|
||||||
|
- [Svelte Schema Form](https://github.com/restspace/svelte-schema-form) is a form generator for JSON schema
|
||||||
|
- [svelte-gesture](https://github.com/wobsoriano/svelte-gesture) is a library that lets you bind richer mouse and touch events to any component or view
|
||||||
|
- [Snap Layout](https://github.com/ThaUnknown/snap-layout) and [universal-title-bar](https://github.com/ThaUnknown/universal-title-bar) bring Windows 11 snap layout and title features to webapps and PWAs. Both can be imported as a `.svelte` module or as a web component
|
||||||
|
- [svelte-adapter-bun](https://github.com/gornostay25/svelte-adapter-bun) is an adapter for SvelteKit apps that generates a standalone Bun server
|
||||||
|
- [json2dir](https://www.npmjs.com/package/json2dir) converts JSON objects into directory trees
|
||||||
|
- [Svelte Command Palette](https://github.com/rohitpotato/svelte-command-palette) is a drop-in command palette component
|
||||||
|
- [svelte-use-drop-outside](https://github.com/untemps/svelte-use-drop-outside) is a Svelte action to drop an element outside an area
|
||||||
|
- [PowerTable](https://github.com/muonw/powertable) is a JavaScript component that turns JSON data into an interactive HTML table
|
||||||
|
- [svelte-slides](https://github.com/rajasegar/svelte-slides) is a slide show template for Svelte using Reveal.js
|
||||||
|
- [Svelte Theme Light](https://marketplace.visualstudio.com/items?itemName=webmaek.svelte-theme-light) is a Visual Studio Code theme based on the Svelte REPL
|
||||||
|
|
||||||
|
Did we miss anything? Let us know on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
|
||||||
|
|
||||||
|
Still looking for something to do in September? Come join us at the Svelte Summit in Stockholm! [Get your tickets now](https://www.sveltesummit.com/).
|
||||||
|
|
||||||
|
See ya next month!
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
question: How can I update my components written in Svelte v2?
|
|
||||||
---
|
|
||||||
|
|
||||||
svelte-upgrade isn't fully working for v2->v3 yet, [but it's close](https://github.com/sveltejs/svelte-upgrade/pull/12).
|
|
||||||
@ -0,0 +1,157 @@
|
|||||||
|
import {
|
||||||
|
ARIARoleDefintionKey,
|
||||||
|
roles as roles_map,
|
||||||
|
elementRoles,
|
||||||
|
ARIARoleRelationConcept
|
||||||
|
} from 'aria-query';
|
||||||
|
import { AXObjects, elementAXObjects } from 'axobject-query';
|
||||||
|
import Attribute from '../nodes/Attribute';
|
||||||
|
|
||||||
|
const roles = [...roles_map.keys()];
|
||||||
|
|
||||||
|
const non_interactive_roles = new Set(
|
||||||
|
roles
|
||||||
|
.filter((name) => {
|
||||||
|
const role = roles_map.get(name);
|
||||||
|
return (
|
||||||
|
!roles_map.get(name).abstract &&
|
||||||
|
// 'toolbar' does not descend from widget, but it does support
|
||||||
|
// aria-activedescendant, thus in practice we treat it as a widget.
|
||||||
|
name !== 'toolbar' &&
|
||||||
|
!role.superClass.some((classes) => classes.includes('widget'))
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.concat(
|
||||||
|
// The `progressbar` is descended from `widget`, but in practice, its
|
||||||
|
// value is always `readonly`, so we treat it as a non-interactive role.
|
||||||
|
'progressbar'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const interactive_roles = new Set(
|
||||||
|
roles
|
||||||
|
.filter((name) => {
|
||||||
|
const role = roles_map.get(name);
|
||||||
|
return (
|
||||||
|
!role.abstract &&
|
||||||
|
// The `progressbar` is descended from `widget`, but in practice, its
|
||||||
|
// value is always `readonly`, so we treat it as a non-interactive role.
|
||||||
|
name !== 'progressbar' &&
|
||||||
|
role.superClass.some((classes) => classes.includes('widget'))
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.concat(
|
||||||
|
// 'toolbar' does not descend from widget, but it does support
|
||||||
|
// aria-activedescendant, thus in practice we treat it as a widget.
|
||||||
|
'toolbar'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
export function is_non_interactive_roles(role: ARIARoleDefintionKey) {
|
||||||
|
return non_interactive_roles.has(role);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function is_interactive_roles(role: ARIARoleDefintionKey) {
|
||||||
|
return interactive_roles.has(role);
|
||||||
|
}
|
||||||
|
|
||||||
|
const presentation_roles = new Set(['presentation', 'none']);
|
||||||
|
|
||||||
|
export function is_presentation_role(role: ARIARoleDefintionKey) {
|
||||||
|
return presentation_roles.has(role);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function is_hidden_from_screen_reader(tag_name: string, attribute_map: Map<string, Attribute>) {
|
||||||
|
if (tag_name === 'input') {
|
||||||
|
const type = attribute_map.get('type')?.get_static_value();
|
||||||
|
|
||||||
|
if (type && type === 'hidden') {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const aria_hidden = attribute_map.get('aria-hidden');
|
||||||
|
if (!aria_hidden) return false;
|
||||||
|
if (!aria_hidden.is_static) return true;
|
||||||
|
const aria_hidden_value = aria_hidden.get_static_value();
|
||||||
|
return aria_hidden_value === true || aria_hidden_value === 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
const non_interactive_element_role_schemas: ARIARoleRelationConcept[] = [];
|
||||||
|
|
||||||
|
elementRoles.entries().forEach(([schema, roles]) => {
|
||||||
|
if ([...roles].every((role) => non_interactive_roles.has(role))) {
|
||||||
|
non_interactive_element_role_schemas.push(schema);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const interactive_element_role_schemas: ARIARoleRelationConcept[] = [];
|
||||||
|
|
||||||
|
elementRoles.entries().forEach(([schema, roles]) => {
|
||||||
|
if ([...roles].every((role) => interactive_roles.has(role))) {
|
||||||
|
interactive_element_role_schemas.push(schema);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const interactive_ax_objects = new Set(
|
||||||
|
[...AXObjects.keys()].filter((name) => AXObjects.get(name).type === 'widget')
|
||||||
|
);
|
||||||
|
|
||||||
|
const interactive_element_ax_object_schemas: ARIARoleRelationConcept[] = [];
|
||||||
|
|
||||||
|
elementAXObjects.entries().forEach(([schema, ax_object]) => {
|
||||||
|
if ([...ax_object].every((role) => interactive_ax_objects.has(role))) {
|
||||||
|
interactive_element_ax_object_schemas.push(schema);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function match_schema(
|
||||||
|
schema: ARIARoleRelationConcept,
|
||||||
|
tag_name: string,
|
||||||
|
attribute_map: Map<string, Attribute>
|
||||||
|
) {
|
||||||
|
if (schema.name !== tag_name) return false;
|
||||||
|
if (!schema.attributes) return true;
|
||||||
|
return schema.attributes.every((schema_attribute) => {
|
||||||
|
const attribute = attribute_map.get(schema_attribute.name);
|
||||||
|
if (!attribute) return false;
|
||||||
|
if (
|
||||||
|
schema_attribute.value &&
|
||||||
|
schema_attribute.value !== attribute.get_static_value()
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function is_interactive_element(
|
||||||
|
tag_name: string,
|
||||||
|
attribute_map: Map<string, Attribute>
|
||||||
|
): boolean {
|
||||||
|
if (
|
||||||
|
interactive_element_role_schemas.some((schema) =>
|
||||||
|
match_schema(schema, tag_name, attribute_map)
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
non_interactive_element_role_schemas.some((schema) =>
|
||||||
|
match_schema(schema, tag_name, attribute_map)
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
interactive_element_ax_object_schemas.some((schema) =>
|
||||||
|
match_schema(schema, tag_name, attribute_map)
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
@ -0,0 +1,840 @@
|
|||||||
|
/** ----------------------------------------------------------------------
|
||||||
|
This file is automatically generated by `scripts/globals-extractor.mjs`.
|
||||||
|
Generated At: 2022-09-03T15:22:37.415Z
|
||||||
|
---------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
export default new Set([
|
||||||
|
'AbortController',
|
||||||
|
'AbortSignal',
|
||||||
|
'AbstractRange',
|
||||||
|
'ActiveXObject',
|
||||||
|
'AggregateError',
|
||||||
|
'AnalyserNode',
|
||||||
|
'Animation',
|
||||||
|
'AnimationEffect',
|
||||||
|
'AnimationEvent',
|
||||||
|
'AnimationPlaybackEvent',
|
||||||
|
'AnimationTimeline',
|
||||||
|
'Array',
|
||||||
|
'ArrayBuffer',
|
||||||
|
'Atomics',
|
||||||
|
'Attr',
|
||||||
|
'Audio',
|
||||||
|
'AudioBuffer',
|
||||||
|
'AudioBufferSourceNode',
|
||||||
|
'AudioContext',
|
||||||
|
'AudioDestinationNode',
|
||||||
|
'AudioListener',
|
||||||
|
'AudioNode',
|
||||||
|
'AudioParam',
|
||||||
|
'AudioParamMap',
|
||||||
|
'AudioProcessingEvent',
|
||||||
|
'AudioScheduledSourceNode',
|
||||||
|
'AudioWorklet',
|
||||||
|
'AudioWorkletNode',
|
||||||
|
'AuthenticatorAssertionResponse',
|
||||||
|
'AuthenticatorAttestationResponse',
|
||||||
|
'AuthenticatorResponse',
|
||||||
|
'BarProp',
|
||||||
|
'BaseAudioContext',
|
||||||
|
'BeforeUnloadEvent',
|
||||||
|
'BigInt',
|
||||||
|
'BigInt64Array',
|
||||||
|
'BigUint64Array',
|
||||||
|
'BiquadFilterNode',
|
||||||
|
'Blob',
|
||||||
|
'BlobEvent',
|
||||||
|
'Boolean',
|
||||||
|
'BroadcastChannel',
|
||||||
|
'ByteLengthQueuingStrategy',
|
||||||
|
'CDATASection',
|
||||||
|
'CSS',
|
||||||
|
'CSSAnimation',
|
||||||
|
'CSSConditionRule',
|
||||||
|
'CSSCounterStyleRule',
|
||||||
|
'CSSFontFaceRule',
|
||||||
|
'CSSGroupingRule',
|
||||||
|
'CSSImportRule',
|
||||||
|
'CSSKeyframeRule',
|
||||||
|
'CSSKeyframesRule',
|
||||||
|
'CSSMediaRule',
|
||||||
|
'CSSNamespaceRule',
|
||||||
|
'CSSPageRule',
|
||||||
|
'CSSRule',
|
||||||
|
'CSSRuleList',
|
||||||
|
'CSSStyleDeclaration',
|
||||||
|
'CSSStyleRule',
|
||||||
|
'CSSStyleSheet',
|
||||||
|
'CSSSupportsRule',
|
||||||
|
'CSSTransition',
|
||||||
|
'Cache',
|
||||||
|
'CacheStorage',
|
||||||
|
'CanvasCaptureMediaStreamTrack',
|
||||||
|
'CanvasGradient',
|
||||||
|
'CanvasPattern',
|
||||||
|
'CanvasRenderingContext2D',
|
||||||
|
'ChannelMergerNode',
|
||||||
|
'ChannelSplitterNode',
|
||||||
|
'CharacterData',
|
||||||
|
'ClientRect',
|
||||||
|
'Clipboard',
|
||||||
|
'ClipboardEvent',
|
||||||
|
'ClipboardItem',
|
||||||
|
'CloseEvent',
|
||||||
|
'Comment',
|
||||||
|
'CompositionEvent',
|
||||||
|
'ConstantSourceNode',
|
||||||
|
'ConvolverNode',
|
||||||
|
'CountQueuingStrategy',
|
||||||
|
'Credential',
|
||||||
|
'CredentialsContainer',
|
||||||
|
'Crypto',
|
||||||
|
'CryptoKey',
|
||||||
|
'CustomElementRegistry',
|
||||||
|
'CustomEvent',
|
||||||
|
'DOMException',
|
||||||
|
'DOMImplementation',
|
||||||
|
'DOMMatrix',
|
||||||
|
'DOMMatrixReadOnly',
|
||||||
|
'DOMParser',
|
||||||
|
'DOMPoint',
|
||||||
|
'DOMPointReadOnly',
|
||||||
|
'DOMQuad',
|
||||||
|
'DOMRect',
|
||||||
|
'DOMRectList',
|
||||||
|
'DOMRectReadOnly',
|
||||||
|
'DOMStringList',
|
||||||
|
'DOMStringMap',
|
||||||
|
'DOMTokenList',
|
||||||
|
'DataTransfer',
|
||||||
|
'DataTransferItem',
|
||||||
|
'DataTransferItemList',
|
||||||
|
'DataView',
|
||||||
|
'Date',
|
||||||
|
'DelayNode',
|
||||||
|
'DeviceMotionEvent',
|
||||||
|
'DeviceOrientationEvent',
|
||||||
|
'Document',
|
||||||
|
'DocumentFragment',
|
||||||
|
'DocumentTimeline',
|
||||||
|
'DocumentType',
|
||||||
|
'DragEvent',
|
||||||
|
'DynamicsCompressorNode',
|
||||||
|
'Element',
|
||||||
|
'ElementInternals',
|
||||||
|
'Enumerator',
|
||||||
|
'Error',
|
||||||
|
'ErrorEvent',
|
||||||
|
'EvalError',
|
||||||
|
'Event',
|
||||||
|
'EventCounts',
|
||||||
|
'EventSource',
|
||||||
|
'EventTarget',
|
||||||
|
'External',
|
||||||
|
'File',
|
||||||
|
'FileList',
|
||||||
|
'FileReader',
|
||||||
|
'FileSystem',
|
||||||
|
'FileSystemDirectoryEntry',
|
||||||
|
'FileSystemDirectoryHandle',
|
||||||
|
'FileSystemDirectoryReader',
|
||||||
|
'FileSystemEntry',
|
||||||
|
'FileSystemFileEntry',
|
||||||
|
'FileSystemFileHandle',
|
||||||
|
'FileSystemHandle',
|
||||||
|
'FinalizationRegistry',
|
||||||
|
'Float32Array',
|
||||||
|
'Float64Array',
|
||||||
|
'FocusEvent',
|
||||||
|
'FontFace',
|
||||||
|
'FontFaceSet',
|
||||||
|
'FontFaceSetLoadEvent',
|
||||||
|
'FormData',
|
||||||
|
'FormDataEvent',
|
||||||
|
'Function',
|
||||||
|
'GainNode',
|
||||||
|
'Gamepad',
|
||||||
|
'GamepadButton',
|
||||||
|
'GamepadEvent',
|
||||||
|
'GamepadHapticActuator',
|
||||||
|
'Geolocation',
|
||||||
|
'GeolocationCoordinates',
|
||||||
|
'GeolocationPosition',
|
||||||
|
'GeolocationPositionError',
|
||||||
|
'HTMLAllCollection',
|
||||||
|
'HTMLAnchorElement',
|
||||||
|
'HTMLAreaElement',
|
||||||
|
'HTMLAudioElement',
|
||||||
|
'HTMLBRElement',
|
||||||
|
'HTMLBaseElement',
|
||||||
|
'HTMLBodyElement',
|
||||||
|
'HTMLButtonElement',
|
||||||
|
'HTMLCanvasElement',
|
||||||
|
'HTMLCollection',
|
||||||
|
'HTMLDListElement',
|
||||||
|
'HTMLDataElement',
|
||||||
|
'HTMLDataListElement',
|
||||||
|
'HTMLDetailsElement',
|
||||||
|
'HTMLDialogElement',
|
||||||
|
'HTMLDirectoryElement',
|
||||||
|
'HTMLDivElement',
|
||||||
|
'HTMLDocument',
|
||||||
|
'HTMLElement',
|
||||||
|
'HTMLEmbedElement',
|
||||||
|
'HTMLFieldSetElement',
|
||||||
|
'HTMLFontElement',
|
||||||
|
'HTMLFormControlsCollection',
|
||||||
|
'HTMLFormElement',
|
||||||
|
'HTMLFrameElement',
|
||||||
|
'HTMLFrameSetElement',
|
||||||
|
'HTMLHRElement',
|
||||||
|
'HTMLHeadElement',
|
||||||
|
'HTMLHeadingElement',
|
||||||
|
'HTMLHtmlElement',
|
||||||
|
'HTMLIFrameElement',
|
||||||
|
'HTMLImageElement',
|
||||||
|
'HTMLInputElement',
|
||||||
|
'HTMLLIElement',
|
||||||
|
'HTMLLabelElement',
|
||||||
|
'HTMLLegendElement',
|
||||||
|
'HTMLLinkElement',
|
||||||
|
'HTMLMapElement',
|
||||||
|
'HTMLMarqueeElement',
|
||||||
|
'HTMLMediaElement',
|
||||||
|
'HTMLMenuElement',
|
||||||
|
'HTMLMetaElement',
|
||||||
|
'HTMLMeterElement',
|
||||||
|
'HTMLModElement',
|
||||||
|
'HTMLOListElement',
|
||||||
|
'HTMLObjectElement',
|
||||||
|
'HTMLOptGroupElement',
|
||||||
|
'HTMLOptionElement',
|
||||||
|
'HTMLOptionsCollection',
|
||||||
|
'HTMLOutputElement',
|
||||||
|
'HTMLParagraphElement',
|
||||||
|
'HTMLParamElement',
|
||||||
|
'HTMLPictureElement',
|
||||||
|
'HTMLPreElement',
|
||||||
|
'HTMLProgressElement',
|
||||||
|
'HTMLQuoteElement',
|
||||||
|
'HTMLScriptElement',
|
||||||
|
'HTMLSelectElement',
|
||||||
|
'HTMLSlotElement',
|
||||||
|
'HTMLSourceElement',
|
||||||
|
'HTMLSpanElement',
|
||||||
|
'HTMLStyleElement',
|
||||||
|
'HTMLTableCaptionElement',
|
||||||
|
'HTMLTableCellElement',
|
||||||
|
'HTMLTableColElement',
|
||||||
|
'HTMLTableElement',
|
||||||
|
'HTMLTableRowElement',
|
||||||
|
'HTMLTableSectionElement',
|
||||||
|
'HTMLTemplateElement',
|
||||||
|
'HTMLTextAreaElement',
|
||||||
|
'HTMLTimeElement',
|
||||||
|
'HTMLTitleElement',
|
||||||
|
'HTMLTrackElement',
|
||||||
|
'HTMLUListElement',
|
||||||
|
'HTMLUnknownElement',
|
||||||
|
'HTMLVideoElement',
|
||||||
|
'HashChangeEvent',
|
||||||
|
'Headers',
|
||||||
|
'History',
|
||||||
|
'IDBCursor',
|
||||||
|
'IDBCursorWithValue',
|
||||||
|
'IDBDatabase',
|
||||||
|
'IDBFactory',
|
||||||
|
'IDBIndex',
|
||||||
|
'IDBKeyRange',
|
||||||
|
'IDBObjectStore',
|
||||||
|
'IDBOpenDBRequest',
|
||||||
|
'IDBRequest',
|
||||||
|
'IDBTransaction',
|
||||||
|
'IDBVersionChangeEvent',
|
||||||
|
'IIRFilterNode',
|
||||||
|
'IdleDeadline',
|
||||||
|
'Image',
|
||||||
|
'ImageBitmap',
|
||||||
|
'ImageBitmapRenderingContext',
|
||||||
|
'ImageData',
|
||||||
|
'Infinity',
|
||||||
|
'InputDeviceInfo',
|
||||||
|
'InputEvent',
|
||||||
|
'Int16Array',
|
||||||
|
'Int32Array',
|
||||||
|
'Int8Array',
|
||||||
|
'InternalError',
|
||||||
|
'IntersectionObserver',
|
||||||
|
'IntersectionObserverEntry',
|
||||||
|
'Intl',
|
||||||
|
'JSON',
|
||||||
|
'KeyboardEvent',
|
||||||
|
'KeyframeEffect',
|
||||||
|
'Location',
|
||||||
|
'Lock',
|
||||||
|
'LockManager',
|
||||||
|
'Map',
|
||||||
|
'Math',
|
||||||
|
'MathMLElement',
|
||||||
|
'MediaCapabilities',
|
||||||
|
'MediaDeviceInfo',
|
||||||
|
'MediaDevices',
|
||||||
|
'MediaElementAudioSourceNode',
|
||||||
|
'MediaEncryptedEvent',
|
||||||
|
'MediaError',
|
||||||
|
'MediaKeyMessageEvent',
|
||||||
|
'MediaKeySession',
|
||||||
|
'MediaKeyStatusMap',
|
||||||
|
'MediaKeySystemAccess',
|
||||||
|
'MediaKeys',
|
||||||
|
'MediaList',
|
||||||
|
'MediaMetadata',
|
||||||
|
'MediaQueryList',
|
||||||
|
'MediaQueryListEvent',
|
||||||
|
'MediaRecorder',
|
||||||
|
'MediaRecorderErrorEvent',
|
||||||
|
'MediaSession',
|
||||||
|
'MediaSource',
|
||||||
|
'MediaStream',
|
||||||
|
'MediaStreamAudioDestinationNode',
|
||||||
|
'MediaStreamAudioSourceNode',
|
||||||
|
'MediaStreamTrack',
|
||||||
|
'MediaStreamTrackEvent',
|
||||||
|
'MessageChannel',
|
||||||
|
'MessageEvent',
|
||||||
|
'MessagePort',
|
||||||
|
'MimeType',
|
||||||
|
'MimeTypeArray',
|
||||||
|
'MouseEvent',
|
||||||
|
'MutationEvent',
|
||||||
|
'MutationObserver',
|
||||||
|
'MutationRecord',
|
||||||
|
'NaN',
|
||||||
|
'NamedNodeMap',
|
||||||
|
'NavigationPreloadManager',
|
||||||
|
'Navigator',
|
||||||
|
'NetworkInformation',
|
||||||
|
'Node',
|
||||||
|
'NodeFilter',
|
||||||
|
'NodeIterator',
|
||||||
|
'NodeList',
|
||||||
|
'Notification',
|
||||||
|
'Number',
|
||||||
|
'Object',
|
||||||
|
'OfflineAudioCompletionEvent',
|
||||||
|
'OfflineAudioContext',
|
||||||
|
'Option',
|
||||||
|
'OscillatorNode',
|
||||||
|
'OverconstrainedError',
|
||||||
|
'PageTransitionEvent',
|
||||||
|
'PannerNode',
|
||||||
|
'Path2D',
|
||||||
|
'PaymentAddress',
|
||||||
|
'PaymentMethodChangeEvent',
|
||||||
|
'PaymentRequest',
|
||||||
|
'PaymentRequestUpdateEvent',
|
||||||
|
'PaymentResponse',
|
||||||
|
'Performance',
|
||||||
|
'PerformanceEntry',
|
||||||
|
'PerformanceEventTiming',
|
||||||
|
'PerformanceMark',
|
||||||
|
'PerformanceMeasure',
|
||||||
|
'PerformanceNavigation',
|
||||||
|
'PerformanceNavigationTiming',
|
||||||
|
'PerformanceObserver',
|
||||||
|
'PerformanceObserverEntryList',
|
||||||
|
'PerformancePaintTiming',
|
||||||
|
'PerformanceResourceTiming',
|
||||||
|
'PerformanceServerTiming',
|
||||||
|
'PerformanceTiming',
|
||||||
|
'PeriodicWave',
|
||||||
|
'PermissionStatus',
|
||||||
|
'Permissions',
|
||||||
|
'PictureInPictureWindow',
|
||||||
|
'Plugin',
|
||||||
|
'PluginArray',
|
||||||
|
'PointerEvent',
|
||||||
|
'PopStateEvent',
|
||||||
|
'ProcessingInstruction',
|
||||||
|
'ProgressEvent',
|
||||||
|
'Promise',
|
||||||
|
'PromiseRejectionEvent',
|
||||||
|
'Proxy',
|
||||||
|
'PublicKeyCredential',
|
||||||
|
'PushManager',
|
||||||
|
'PushSubscription',
|
||||||
|
'PushSubscriptionOptions',
|
||||||
|
'RTCCertificate',
|
||||||
|
'RTCDTMFSender',
|
||||||
|
'RTCDTMFToneChangeEvent',
|
||||||
|
'RTCDataChannel',
|
||||||
|
'RTCDataChannelEvent',
|
||||||
|
'RTCDtlsTransport',
|
||||||
|
'RTCEncodedAudioFrame',
|
||||||
|
'RTCEncodedVideoFrame',
|
||||||
|
'RTCError',
|
||||||
|
'RTCErrorEvent',
|
||||||
|
'RTCIceCandidate',
|
||||||
|
'RTCIceTransport',
|
||||||
|
'RTCPeerConnection',
|
||||||
|
'RTCPeerConnectionIceErrorEvent',
|
||||||
|
'RTCPeerConnectionIceEvent',
|
||||||
|
'RTCRtpReceiver',
|
||||||
|
'RTCRtpSender',
|
||||||
|
'RTCRtpTransceiver',
|
||||||
|
'RTCSctpTransport',
|
||||||
|
'RTCSessionDescription',
|
||||||
|
'RTCStatsReport',
|
||||||
|
'RTCTrackEvent',
|
||||||
|
'RadioNodeList',
|
||||||
|
'Range',
|
||||||
|
'RangeError',
|
||||||
|
'ReadableByteStreamController',
|
||||||
|
'ReadableStream',
|
||||||
|
'ReadableStreamBYOBReader',
|
||||||
|
'ReadableStreamBYOBRequest',
|
||||||
|
'ReadableStreamDefaultController',
|
||||||
|
'ReadableStreamDefaultReader',
|
||||||
|
'ReferenceError',
|
||||||
|
'Reflect',
|
||||||
|
'RegExp',
|
||||||
|
'RemotePlayback',
|
||||||
|
'Request',
|
||||||
|
'ResizeObserver',
|
||||||
|
'ResizeObserverEntry',
|
||||||
|
'ResizeObserverSize',
|
||||||
|
'Response',
|
||||||
|
'SVGAElement',
|
||||||
|
'SVGAngle',
|
||||||
|
'SVGAnimateElement',
|
||||||
|
'SVGAnimateMotionElement',
|
||||||
|
'SVGAnimateTransformElement',
|
||||||
|
'SVGAnimatedAngle',
|
||||||
|
'SVGAnimatedBoolean',
|
||||||
|
'SVGAnimatedEnumeration',
|
||||||
|
'SVGAnimatedInteger',
|
||||||
|
'SVGAnimatedLength',
|
||||||
|
'SVGAnimatedLengthList',
|
||||||
|
'SVGAnimatedNumber',
|
||||||
|
'SVGAnimatedNumberList',
|
||||||
|
'SVGAnimatedPreserveAspectRatio',
|
||||||
|
'SVGAnimatedRect',
|
||||||
|
'SVGAnimatedString',
|
||||||
|
'SVGAnimatedTransformList',
|
||||||
|
'SVGAnimationElement',
|
||||||
|
'SVGCircleElement',
|
||||||
|
'SVGClipPathElement',
|
||||||
|
'SVGComponentTransferFunctionElement',
|
||||||
|
'SVGCursorElement',
|
||||||
|
'SVGDefsElement',
|
||||||
|
'SVGDescElement',
|
||||||
|
'SVGElement',
|
||||||
|
'SVGEllipseElement',
|
||||||
|
'SVGFEBlendElement',
|
||||||
|
'SVGFEColorMatrixElement',
|
||||||
|
'SVGFEComponentTransferElement',
|
||||||
|
'SVGFECompositeElement',
|
||||||
|
'SVGFEConvolveMatrixElement',
|
||||||
|
'SVGFEDiffuseLightingElement',
|
||||||
|
'SVGFEDisplacementMapElement',
|
||||||
|
'SVGFEDistantLightElement',
|
||||||
|
'SVGFEDropShadowElement',
|
||||||
|
'SVGFEFloodElement',
|
||||||
|
'SVGFEFuncAElement',
|
||||||
|
'SVGFEFuncBElement',
|
||||||
|
'SVGFEFuncGElement',
|
||||||
|
'SVGFEFuncRElement',
|
||||||
|
'SVGFEGaussianBlurElement',
|
||||||
|
'SVGFEImageElement',
|
||||||
|
'SVGFEMergeElement',
|
||||||
|
'SVGFEMergeNodeElement',
|
||||||
|
'SVGFEMorphologyElement',
|
||||||
|
'SVGFEOffsetElement',
|
||||||
|
'SVGFEPointLightElement',
|
||||||
|
'SVGFESpecularLightingElement',
|
||||||
|
'SVGFESpotLightElement',
|
||||||
|
'SVGFETileElement',
|
||||||
|
'SVGFETurbulenceElement',
|
||||||
|
'SVGFilterElement',
|
||||||
|
'SVGForeignObjectElement',
|
||||||
|
'SVGGElement',
|
||||||
|
'SVGGeometryElement',
|
||||||
|
'SVGGradientElement',
|
||||||
|
'SVGGraphicsElement',
|
||||||
|
'SVGImageElement',
|
||||||
|
'SVGLength',
|
||||||
|
'SVGLengthList',
|
||||||
|
'SVGLineElement',
|
||||||
|
'SVGLinearGradientElement',
|
||||||
|
'SVGMPathElement',
|
||||||
|
'SVGMarkerElement',
|
||||||
|
'SVGMaskElement',
|
||||||
|
'SVGMatrix',
|
||||||
|
'SVGMetadataElement',
|
||||||
|
'SVGNumber',
|
||||||
|
'SVGNumberList',
|
||||||
|
'SVGPathElement',
|
||||||
|
'SVGPatternElement',
|
||||||
|
'SVGPoint',
|
||||||
|
'SVGPointList',
|
||||||
|
'SVGPolygonElement',
|
||||||
|
'SVGPolylineElement',
|
||||||
|
'SVGPreserveAspectRatio',
|
||||||
|
'SVGRadialGradientElement',
|
||||||
|
'SVGRect',
|
||||||
|
'SVGRectElement',
|
||||||
|
'SVGSVGElement',
|
||||||
|
'SVGScriptElement',
|
||||||
|
'SVGSetElement',
|
||||||
|
'SVGStopElement',
|
||||||
|
'SVGStringList',
|
||||||
|
'SVGStyleElement',
|
||||||
|
'SVGSwitchElement',
|
||||||
|
'SVGSymbolElement',
|
||||||
|
'SVGTSpanElement',
|
||||||
|
'SVGTextContentElement',
|
||||||
|
'SVGTextElement',
|
||||||
|
'SVGTextPathElement',
|
||||||
|
'SVGTextPositioningElement',
|
||||||
|
'SVGTitleElement',
|
||||||
|
'SVGTransform',
|
||||||
|
'SVGTransformList',
|
||||||
|
'SVGUnitTypes',
|
||||||
|
'SVGUseElement',
|
||||||
|
'SVGViewElement',
|
||||||
|
'SafeArray',
|
||||||
|
'Screen',
|
||||||
|
'ScreenOrientation',
|
||||||
|
'ScriptProcessorNode',
|
||||||
|
'SecurityPolicyViolationEvent',
|
||||||
|
'Selection',
|
||||||
|
'ServiceWorker',
|
||||||
|
'ServiceWorkerContainer',
|
||||||
|
'ServiceWorkerRegistration',
|
||||||
|
'Set',
|
||||||
|
'ShadowRoot',
|
||||||
|
'SharedArrayBuffer',
|
||||||
|
'SharedWorker',
|
||||||
|
'SourceBuffer',
|
||||||
|
'SourceBufferList',
|
||||||
|
'SpeechRecognitionAlternative',
|
||||||
|
'SpeechRecognitionErrorEvent',
|
||||||
|
'SpeechRecognitionResult',
|
||||||
|
'SpeechRecognitionResultList',
|
||||||
|
'SpeechSynthesis',
|
||||||
|
'SpeechSynthesisErrorEvent',
|
||||||
|
'SpeechSynthesisEvent',
|
||||||
|
'SpeechSynthesisUtterance',
|
||||||
|
'SpeechSynthesisVoice',
|
||||||
|
'StaticRange',
|
||||||
|
'StereoPannerNode',
|
||||||
|
'Storage',
|
||||||
|
'StorageEvent',
|
||||||
|
'StorageManager',
|
||||||
|
'String',
|
||||||
|
'StyleMedia',
|
||||||
|
'StyleSheet',
|
||||||
|
'StyleSheetList',
|
||||||
|
'SubmitEvent',
|
||||||
|
'SubtleCrypto',
|
||||||
|
'Symbol',
|
||||||
|
'SyntaxError',
|
||||||
|
'Text',
|
||||||
|
'TextDecoder',
|
||||||
|
'TextDecoderStream',
|
||||||
|
'TextEncoder',
|
||||||
|
'TextEncoderStream',
|
||||||
|
'TextMetrics',
|
||||||
|
'TextTrack',
|
||||||
|
'TextTrackCue',
|
||||||
|
'TextTrackCueList',
|
||||||
|
'TextTrackList',
|
||||||
|
'TimeRanges',
|
||||||
|
'Touch',
|
||||||
|
'TouchEvent',
|
||||||
|
'TouchList',
|
||||||
|
'TrackEvent',
|
||||||
|
'TransformStream',
|
||||||
|
'TransformStreamDefaultController',
|
||||||
|
'TransitionEvent',
|
||||||
|
'TreeWalker',
|
||||||
|
'TypeError',
|
||||||
|
'UIEvent',
|
||||||
|
'URIError',
|
||||||
|
'URL',
|
||||||
|
'URLSearchParams',
|
||||||
|
'Uint16Array',
|
||||||
|
'Uint32Array',
|
||||||
|
'Uint8Array',
|
||||||
|
'Uint8ClampedArray',
|
||||||
|
'VBArray',
|
||||||
|
'VTTCue',
|
||||||
|
'VTTRegion',
|
||||||
|
'ValidityState',
|
||||||
|
'VarDate',
|
||||||
|
'VideoColorSpace',
|
||||||
|
'VideoPlaybackQuality',
|
||||||
|
'VisualViewport',
|
||||||
|
'WSH',
|
||||||
|
'WScript',
|
||||||
|
'WaveShaperNode',
|
||||||
|
'WeakMap',
|
||||||
|
'WeakRef',
|
||||||
|
'WeakSet',
|
||||||
|
'WebAssembly',
|
||||||
|
'WebGL2RenderingContext',
|
||||||
|
'WebGLActiveInfo',
|
||||||
|
'WebGLBuffer',
|
||||||
|
'WebGLContextEvent',
|
||||||
|
'WebGLFramebuffer',
|
||||||
|
'WebGLProgram',
|
||||||
|
'WebGLQuery',
|
||||||
|
'WebGLRenderbuffer',
|
||||||
|
'WebGLRenderingContext',
|
||||||
|
'WebGLSampler',
|
||||||
|
'WebGLShader',
|
||||||
|
'WebGLShaderPrecisionFormat',
|
||||||
|
'WebGLSync',
|
||||||
|
'WebGLTexture',
|
||||||
|
'WebGLTransformFeedback',
|
||||||
|
'WebGLUniformLocation',
|
||||||
|
'WebGLVertexArrayObject',
|
||||||
|
'WebKitCSSMatrix',
|
||||||
|
'WebSocket',
|
||||||
|
'WheelEvent',
|
||||||
|
'Window',
|
||||||
|
'Worker',
|
||||||
|
'Worklet',
|
||||||
|
'WritableStream',
|
||||||
|
'WritableStreamDefaultController',
|
||||||
|
'WritableStreamDefaultWriter',
|
||||||
|
'XMLDocument',
|
||||||
|
'XMLHttpRequest',
|
||||||
|
'XMLHttpRequestEventTarget',
|
||||||
|
'XMLHttpRequestUpload',
|
||||||
|
'XMLSerializer',
|
||||||
|
'XPathEvaluator',
|
||||||
|
'XPathExpression',
|
||||||
|
'XPathResult',
|
||||||
|
'XSLTProcessor',
|
||||||
|
'addEventListener',
|
||||||
|
'alert',
|
||||||
|
'atob',
|
||||||
|
'blur',
|
||||||
|
'btoa',
|
||||||
|
'caches',
|
||||||
|
'cancelAnimationFrame',
|
||||||
|
'cancelIdleCallback',
|
||||||
|
'captureEvents',
|
||||||
|
'clearInterval',
|
||||||
|
'clearTimeout',
|
||||||
|
'clientInformation',
|
||||||
|
'close',
|
||||||
|
'closed',
|
||||||
|
'confirm',
|
||||||
|
'console',
|
||||||
|
'createImageBitmap',
|
||||||
|
'crossOriginIsolated',
|
||||||
|
'crypto',
|
||||||
|
'customElements',
|
||||||
|
'decodeURI',
|
||||||
|
'decodeURIComponent',
|
||||||
|
'devicePixelRatio',
|
||||||
|
'dispatchEvent',
|
||||||
|
'document',
|
||||||
|
'encodeURI',
|
||||||
|
'encodeURIComponent',
|
||||||
|
'escape',
|
||||||
|
'eval',
|
||||||
|
'event',
|
||||||
|
'external',
|
||||||
|
'fetch',
|
||||||
|
'focus',
|
||||||
|
'frameElement',
|
||||||
|
'frames',
|
||||||
|
'getComputedStyle',
|
||||||
|
'getSelection',
|
||||||
|
'global',
|
||||||
|
'globalThis',
|
||||||
|
'history',
|
||||||
|
'importScripts',
|
||||||
|
'indexedDB',
|
||||||
|
'innerHeight',
|
||||||
|
'innerWidth',
|
||||||
|
'isFinite',
|
||||||
|
'isNaN',
|
||||||
|
'isSecureContext',
|
||||||
|
'length',
|
||||||
|
'localStorage',
|
||||||
|
'location',
|
||||||
|
'locationbar',
|
||||||
|
'matchMedia',
|
||||||
|
'menubar',
|
||||||
|
'moveBy',
|
||||||
|
'moveTo',
|
||||||
|
'name',
|
||||||
|
'navigator',
|
||||||
|
'onabort',
|
||||||
|
'onafterprint',
|
||||||
|
'onanimationcancel',
|
||||||
|
'onanimationend',
|
||||||
|
'onanimationiteration',
|
||||||
|
'onanimationstart',
|
||||||
|
'onauxclick',
|
||||||
|
'onbeforeprint',
|
||||||
|
'onbeforeunload',
|
||||||
|
'onblur',
|
||||||
|
'oncanplay',
|
||||||
|
'oncanplaythrough',
|
||||||
|
'onchange',
|
||||||
|
'onclick',
|
||||||
|
'onclose',
|
||||||
|
'oncontextmenu',
|
||||||
|
'oncuechange',
|
||||||
|
'ondblclick',
|
||||||
|
'ondevicemotion',
|
||||||
|
'ondeviceorientation',
|
||||||
|
'ondrag',
|
||||||
|
'ondragend',
|
||||||
|
'ondragenter',
|
||||||
|
'ondragleave',
|
||||||
|
'ondragover',
|
||||||
|
'ondragstart',
|
||||||
|
'ondrop',
|
||||||
|
'ondurationchange',
|
||||||
|
'onemptied',
|
||||||
|
'onended',
|
||||||
|
'onerror',
|
||||||
|
'onfocus',
|
||||||
|
'onformdata',
|
||||||
|
'ongamepadconnected',
|
||||||
|
'ongamepaddisconnected',
|
||||||
|
'ongotpointercapture',
|
||||||
|
'onhashchange',
|
||||||
|
'oninput',
|
||||||
|
'oninvalid',
|
||||||
|
'onkeydown',
|
||||||
|
'onkeypress',
|
||||||
|
'onkeyup',
|
||||||
|
'onlanguagechange',
|
||||||
|
'onload',
|
||||||
|
'onloadeddata',
|
||||||
|
'onloadedmetadata',
|
||||||
|
'onloadstart',
|
||||||
|
'onlostpointercapture',
|
||||||
|
'onmessage',
|
||||||
|
'onmessageerror',
|
||||||
|
'onmousedown',
|
||||||
|
'onmouseenter',
|
||||||
|
'onmouseleave',
|
||||||
|
'onmousemove',
|
||||||
|
'onmouseout',
|
||||||
|
'onmouseover',
|
||||||
|
'onmouseup',
|
||||||
|
'onoffline',
|
||||||
|
'ononline',
|
||||||
|
'onorientationchange',
|
||||||
|
'onpagehide',
|
||||||
|
'onpageshow',
|
||||||
|
'onpause',
|
||||||
|
'onplay',
|
||||||
|
'onplaying',
|
||||||
|
'onpointercancel',
|
||||||
|
'onpointerdown',
|
||||||
|
'onpointerenter',
|
||||||
|
'onpointerleave',
|
||||||
|
'onpointermove',
|
||||||
|
'onpointerout',
|
||||||
|
'onpointerover',
|
||||||
|
'onpointerup',
|
||||||
|
'onpopstate',
|
||||||
|
'onprogress',
|
||||||
|
'onratechange',
|
||||||
|
'onrejectionhandled',
|
||||||
|
'onreset',
|
||||||
|
'onresize',
|
||||||
|
'onscroll',
|
||||||
|
'onsecuritypolicyviolation',
|
||||||
|
'onseeked',
|
||||||
|
'onseeking',
|
||||||
|
'onselect',
|
||||||
|
'onselectionchange',
|
||||||
|
'onselectstart',
|
||||||
|
'onslotchange',
|
||||||
|
'onstalled',
|
||||||
|
'onstorage',
|
||||||
|
'onsubmit',
|
||||||
|
'onsuspend',
|
||||||
|
'ontimeupdate',
|
||||||
|
'ontoggle',
|
||||||
|
'ontouchcancel',
|
||||||
|
'ontouchend',
|
||||||
|
'ontouchmove',
|
||||||
|
'ontouchstart',
|
||||||
|
'ontransitioncancel',
|
||||||
|
'ontransitionend',
|
||||||
|
'ontransitionrun',
|
||||||
|
'ontransitionstart',
|
||||||
|
'onunhandledrejection',
|
||||||
|
'onunload',
|
||||||
|
'onvolumechange',
|
||||||
|
'onwaiting',
|
||||||
|
'onwebkitanimationend',
|
||||||
|
'onwebkitanimationiteration',
|
||||||
|
'onwebkitanimationstart',
|
||||||
|
'onwebkittransitionend',
|
||||||
|
'onwheel',
|
||||||
|
'open',
|
||||||
|
'opener',
|
||||||
|
'orientation',
|
||||||
|
'origin',
|
||||||
|
'outerHeight',
|
||||||
|
'outerWidth',
|
||||||
|
'pageXOffset',
|
||||||
|
'pageYOffset',
|
||||||
|
'parent',
|
||||||
|
'parseFloat',
|
||||||
|
'parseInt',
|
||||||
|
'performance',
|
||||||
|
'personalbar',
|
||||||
|
'postMessage',
|
||||||
|
'print',
|
||||||
|
'process',
|
||||||
|
'prompt',
|
||||||
|
'queueMicrotask',
|
||||||
|
'releaseEvents',
|
||||||
|
'removeEventListener',
|
||||||
|
'reportError',
|
||||||
|
'requestAnimationFrame',
|
||||||
|
'requestIdleCallback',
|
||||||
|
'resizeBy',
|
||||||
|
'resizeTo',
|
||||||
|
'screen',
|
||||||
|
'screenLeft',
|
||||||
|
'screenTop',
|
||||||
|
'screenX',
|
||||||
|
'screenY',
|
||||||
|
'scroll',
|
||||||
|
'scrollBy',
|
||||||
|
'scrollTo',
|
||||||
|
'scrollX',
|
||||||
|
'scrollY',
|
||||||
|
'scrollbars',
|
||||||
|
'self',
|
||||||
|
'sessionStorage',
|
||||||
|
'setInterval',
|
||||||
|
'setTimeout',
|
||||||
|
'speechSynthesis',
|
||||||
|
'status',
|
||||||
|
'statusbar',
|
||||||
|
'stop',
|
||||||
|
'structuredClone',
|
||||||
|
'toString',
|
||||||
|
'toolbar',
|
||||||
|
'top',
|
||||||
|
'undefined',
|
||||||
|
'unescape',
|
||||||
|
'visualViewport',
|
||||||
|
'webkitURL',
|
||||||
|
'window'
|
||||||
|
]);
|
||||||
@ -1,5 +1,18 @@
|
|||||||
|
/** regex of all html void element names */
|
||||||
const void_element_names = /^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
|
const void_element_names = /^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
|
||||||
|
/** regex of all html element names. svg and math are omitted because they belong to the svg elements namespace */
|
||||||
|
const html_element_names = /^(?:a|abbr|address|area|article|aside|audio|b|base|bdi|bdo|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dialog|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|head|header|hr|html|i|iframe|img|input|ins|kbd|label|legend|li|link|main|map|mark|meta|meter|nav|noscript|object|ol|optgroup|option|output|p|param|picture|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|span|strong|style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|u|ul|var|video|wbr)$/;
|
||||||
|
/** regex of all svg element names */
|
||||||
|
const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
|
||||||
|
|
||||||
export function is_void(name: string) {
|
export function is_void(name: string) {
|
||||||
return void_element_names.test(name) || name.toLowerCase() === '!doctype';
|
return void_element_names.test(name) || name.toLowerCase() === '!doctype';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function is_html(name: string) {
|
||||||
|
return html_element_names.test(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function is_svg(name: string) {
|
||||||
|
return svg.test(name);
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1 @@
|
|||||||
|
@layer base, special;@layer special{div.svelte-xyz{color:rebeccapurple}}@layer base{div.svelte-xyz{color:green}}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<div>hello</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@layer base, special;
|
||||||
|
|
||||||
|
@layer special {
|
||||||
|
div {
|
||||||
|
color: rebeccapurple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
div {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
warnings: []
|
||||||
|
};
|
||||||
@ -0,0 +1 @@
|
|||||||
|
div.svelte-xyz.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz>p.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz span.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz>span.svelte-xyz>b.svelte-xyz{color:red}h2.svelte-xyz span b.svelte-xyz.svelte-xyz{color:red}h2.svelte-xyz b.svelte-xyz.svelte-xyz{color:red}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<div class="svelte-xyz"></div>
|
||||||
|
<h2 class="svelte-xyz">
|
||||||
|
<div class="svelte-xyz"><b class="svelte-xyz">text</b></div>
|
||||||
|
</h2>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
<script>
|
||||||
|
export let element = 'div';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:element this={element} />
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
<svelte:element this={element}>
|
||||||
|
<b>text</b>
|
||||||
|
</svelte:element>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
h2 > p {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
h2 span {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
h2 > span > b {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
h2 span b {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
h2 b {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
{@html '<meta name="head_nested_html" content="head_nested_html">'}
|
||||||
|
<meta name="head_nested" content="head_nested">
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
{@html '<meta name="nested_html" content="nested_html">'}
|
||||||
|
<meta name="nested" content="nested">
|
||||||
|
</svelte:head>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<!-- HEAD_svelte-17ibcve_START -->
|
||||||
|
<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
|
||||||
|
<meta name="main" content="main">
|
||||||
|
<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
|
||||||
|
<meta name="head_nested" content="head_nested">
|
||||||
|
<!-- HEAD_svelte-17ibcve_END -->
|
||||||
|
|
||||||
|
<!-- HEAD_svelte-1gqzvnn_START -->
|
||||||
|
<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
|
||||||
|
<meta name="nested" content="nested">
|
||||||
|
<!-- HEAD_svelte-1gqzvnn_END -->
|
||||||
|
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<!-- HEAD_svelte-17ibcve_START -->
|
||||||
|
<!-- HTML_TAG_START --><meta name="main_html" content="main_html"><!-- HTML_TAG_END -->
|
||||||
|
<meta name="main" content="main">
|
||||||
|
<!-- HTML_TAG_START --><meta name="head_nested_html" content="head_nested_html"><!-- HTML_TAG_END -->
|
||||||
|
<meta name="head_nested" content="head_nested">
|
||||||
|
<!-- HEAD_svelte-17ibcve_END -->
|
||||||
|
|
||||||
|
<!-- HEAD_svelte-1gqzvnn_START -->
|
||||||
|
<!-- HTML_TAG_START --><meta name="nested_html" content="nested_html"><!-- HTML_TAG_END -->
|
||||||
|
<meta name="nested" content="nested">
|
||||||
|
<!-- HEAD_svelte-1gqzvnn_END -->
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
import HeadNested from './HeadNested.svelte';
|
||||||
|
import Nested from './Nested.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
{@html '<meta name="main_html" content="main_html">'}
|
||||||
|
<meta name="main" content="main">
|
||||||
|
<HeadNested />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<Nested/>
|
||||||
@ -1,4 +1,6 @@
|
|||||||
<title>Some Title</title>
|
<title>Some Title</title>
|
||||||
<link href="/" rel="canonical">
|
<!-- HEAD_svelte-1s8aodm_START -->
|
||||||
<meta content="some description" name="description">
|
<link rel="canonical" href="/">
|
||||||
<meta content="some keywords" name="keywords">
|
<meta name="description" content="some description">
|
||||||
|
<meta name="keywords" content="some keywords">
|
||||||
|
<!-- HEAD_svelte-1s8aodm_END -->
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
<title>Some Title</title>
|
<title>Some Title</title>
|
||||||
<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
|
<!-- HEAD_svelte-1s8aodm_START -->
|
||||||
<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
|
<link rel="canonical" href="/">
|
||||||
<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">
|
<meta name="description" content="some description">
|
||||||
|
<meta name="keywords" content="some keywords">
|
||||||
|
<!-- HEAD_svelte-1s8aodm_END -->
|
||||||
|
|||||||
@ -0,0 +1,111 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
append,
|
||||||
|
assign,
|
||||||
|
detach,
|
||||||
|
empty,
|
||||||
|
get_spread_update,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
noop,
|
||||||
|
safe_not_equal,
|
||||||
|
set_svg_attributes,
|
||||||
|
svg_element
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_dynamic_element_1(ctx) {
|
||||||
|
return { c: noop, m: noop, p: noop, d: noop };
|
||||||
|
}
|
||||||
|
|
||||||
|
// (1:0) <svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
function create_dynamic_element(ctx) {
|
||||||
|
let svelte_element1;
|
||||||
|
let svelte_element0;
|
||||||
|
let svelte_element0_levels = [{ xmlns: "http://www.w3.org/2000/svg" }];
|
||||||
|
let svelte_element0_data = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < svelte_element0_levels.length; i += 1) {
|
||||||
|
svelte_element0_data = assign(svelte_element0_data, svelte_element0_levels[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
let svelte_element1_levels = [{ xmlns: "http://www.w3.org/2000/svg" }];
|
||||||
|
let svelte_element1_data = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < svelte_element1_levels.length; i += 1) {
|
||||||
|
svelte_element1_data = assign(svelte_element1_data, svelte_element1_levels[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
svelte_element1 = svg_element("svg");
|
||||||
|
svelte_element0 = svg_element("path");
|
||||||
|
set_svg_attributes(svelte_element0, svelte_element0_data);
|
||||||
|
set_svg_attributes(svelte_element1, svelte_element1_data);
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, svelte_element1, anchor);
|
||||||
|
append(svelte_element1, svelte_element0);
|
||||||
|
},
|
||||||
|
p(ctx, dirty) {
|
||||||
|
set_svg_attributes(svelte_element0, svelte_element0_data = get_spread_update(svelte_element0_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
|
||||||
|
set_svg_attributes(svelte_element1, svelte_element1_data = get_spread_update(svelte_element1_levels, [{ xmlns: "http://www.w3.org/2000/svg" }]));
|
||||||
|
},
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(svelte_element1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let previous_tag = "svg";
|
||||||
|
let svelte_element1_anchor;
|
||||||
|
let svelte_element1 = "svg" && create_dynamic_element(ctx);
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
if (svelte_element1) svelte_element1.c();
|
||||||
|
svelte_element1_anchor = empty();
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
if (svelte_element1) svelte_element1.m(target, anchor);
|
||||||
|
insert(target, svelte_element1_anchor, anchor);
|
||||||
|
},
|
||||||
|
p(ctx, [dirty]) {
|
||||||
|
if ("svg") {
|
||||||
|
if (!previous_tag) {
|
||||||
|
svelte_element1 = create_dynamic_element(ctx);
|
||||||
|
svelte_element1.c();
|
||||||
|
svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
|
||||||
|
} else if (safe_not_equal(previous_tag, "svg")) {
|
||||||
|
svelte_element1.d(1);
|
||||||
|
svelte_element1 = create_dynamic_element(ctx);
|
||||||
|
svelte_element1.c();
|
||||||
|
svelte_element1.m(svelte_element1_anchor.parentNode, svelte_element1_anchor);
|
||||||
|
} else {
|
||||||
|
svelte_element1.p(ctx, dirty);
|
||||||
|
}
|
||||||
|
} else if (previous_tag) {
|
||||||
|
svelte_element1.d(1);
|
||||||
|
svelte_element1 = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
previous_tag = "svg";
|
||||||
|
},
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(svelte_element1_anchor);
|
||||||
|
if (svelte_element1) svelte_element1.d(detaching);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, null, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<svelte:element this="svg" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<svelte:element this="path" xmlns="http://www.w3.org/2000/svg"></svelte:element>
|
||||||
|
</svelte:element>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
export default {
|
||||||
|
skip_if_ssr: true,
|
||||||
|
skip_if_hydrate: true,
|
||||||
|
skip_if_hydrate_from_ssr: true,
|
||||||
|
test: async ({ component, assert, window, waitUntil }) => {
|
||||||
|
assert.htmlEqual(window.document.head.innerHTML, '');
|
||||||
|
component.visible = true;
|
||||||
|
assert.htmlEqual(window.document.head.innerHTML, '<style></style>');
|
||||||
|
await waitUntil(() => window.document.head.innerHTML === '');
|
||||||
|
assert.htmlEqual(window.document.head.innerHTML, '');
|
||||||
|
|
||||||
|
component.visible = false;
|
||||||
|
assert.htmlEqual(window.document.head.innerHTML, '<style></style>');
|
||||||
|
await waitUntil(() => window.document.head.innerHTML === '');
|
||||||
|
assert.htmlEqual(window.document.head.innerHTML, '');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<script>
|
||||||
|
export let visible;
|
||||||
|
|
||||||
|
function foo() {
|
||||||
|
return {
|
||||||
|
duration: 10,
|
||||||
|
css: t => {
|
||||||
|
return `opacity: ${t}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if visible}
|
||||||
|
<div transition:foo></div>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
export let id;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {id}>
|
||||||
|
<p>Slider</p>
|
||||||
|
<span>Track</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
color: var(--rail-color);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: var(--track-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
railColor1: 'black',
|
||||||
|
trackColor1: 'red',
|
||||||
|
railColor2: 'green',
|
||||||
|
trackColor2: 'blue'
|
||||||
|
},
|
||||||
|
html: `
|
||||||
|
<div style="display: contents; --rail-color:black; --track-color:red;">
|
||||||
|
<div id="slider-1">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:green; --track-color:blue;">
|
||||||
|
<div id="slider-2">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
test({ component, assert, target }) {
|
||||||
|
component.railColor1 = 'yellow';
|
||||||
|
component.trackColor2 = 'orange';
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div style="display: contents; --rail-color:yellow; --track-color:red;">
|
||||||
|
<div id="slider-1">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:green; --track-color:orange;">
|
||||||
|
<div id="slider-2">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<script>
|
||||||
|
import Slider from './Slider.svelte';
|
||||||
|
export let railColor1;
|
||||||
|
export let railColor2;
|
||||||
|
export let trackColor1;
|
||||||
|
export let trackColor2;
|
||||||
|
|
||||||
|
function identity(color) {
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:component
|
||||||
|
this={Slider}
|
||||||
|
id="slider-1"
|
||||||
|
--rail-color={railColor1}
|
||||||
|
--track-color={trackColor1}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<svelte:component
|
||||||
|
this={Slider}
|
||||||
|
id="slider-2"
|
||||||
|
--rail-color={railColor2}
|
||||||
|
--track-color={identity(trackColor2)}
|
||||||
|
/>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
export let id;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {id}>
|
||||||
|
<p>Slider1</p>
|
||||||
|
<span>Track</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
color: var(--rail-color);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: var(--track-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
export let id;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {id}>
|
||||||
|
<p>Slider2</p>
|
||||||
|
<span>Track</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
color: var(--rail-color);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: var(--track-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
componentName: 'Slider1'
|
||||||
|
},
|
||||||
|
html: `
|
||||||
|
<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
|
||||||
|
<div id="component1">
|
||||||
|
<p class="svelte-17ay6rc">Slider1</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
|
||||||
|
<div id="component2">
|
||||||
|
<p class="svelte-17ay6rc">Slider1</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
test({ target, window, assert, component }) {
|
||||||
|
|
||||||
|
function assert_slider_1() {
|
||||||
|
const railColor1 = target.querySelector('#component1 p');
|
||||||
|
const trackColor1 = target.querySelector('#component1 span');
|
||||||
|
const railColor2 = target.querySelector('#component2 p');
|
||||||
|
const trackColor2 = target.querySelector('#component2 span');
|
||||||
|
|
||||||
|
assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
|
||||||
|
assert.equal(railColor1.textContent, 'Slider1');
|
||||||
|
assert.equal(railColor2.textContent, 'Slider1');
|
||||||
|
}
|
||||||
|
|
||||||
|
function assert_slider_2() {
|
||||||
|
const railColor1 = target.querySelector('#component1 p');
|
||||||
|
const trackColor1 = target.querySelector('#component1 span');
|
||||||
|
const railColor2 = target.querySelector('#component2 p');
|
||||||
|
const trackColor2 = target.querySelector('#component2 span');
|
||||||
|
|
||||||
|
assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
|
||||||
|
assert.equal(railColor1.textContent, 'Slider2');
|
||||||
|
assert.equal(railColor2.textContent, 'Slider2');
|
||||||
|
}
|
||||||
|
|
||||||
|
assert_slider_1();
|
||||||
|
component.componentName = 'Slider2';
|
||||||
|
assert_slider_2();
|
||||||
|
component.componentName = undefined;
|
||||||
|
assert.equal(window.document.querySelector('div'), null);
|
||||||
|
component.componentName = 'Slider1';
|
||||||
|
assert_slider_1();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<script>
|
||||||
|
import Slider1 from './Slider1.svelte';
|
||||||
|
import Slider2 from './Slider2.svelte';
|
||||||
|
export let componentName = 'Slider1';
|
||||||
|
$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:component
|
||||||
|
this={slider}
|
||||||
|
id="component1"
|
||||||
|
--rail-color="rgb(0, 0, 0)"
|
||||||
|
--track-color="rgb(255, 0, 0)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<svelte:component
|
||||||
|
this={slider}
|
||||||
|
id="component2"
|
||||||
|
--rail-color="rgb(0, 255, 0)"
|
||||||
|
--track-color="rgb(0, 0, 255)"
|
||||||
|
/>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
export let id;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {id}>
|
||||||
|
<p>Slider1</p>
|
||||||
|
<span>Track</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
color: var(--rail-color);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: var(--track-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
export let id;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {id}>
|
||||||
|
<p>Slider2</p>
|
||||||
|
<span>Track</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
color: var(--rail-color);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: var(--track-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
componentName: 'Slider1'
|
||||||
|
},
|
||||||
|
html: `
|
||||||
|
<section>
|
||||||
|
<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
|
||||||
|
<div id="component1">
|
||||||
|
<p class="svelte-17ay6rc">Slider1</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
|
||||||
|
<div id="component2">
|
||||||
|
<p class="svelte-17ay6rc">Slider1</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
`,
|
||||||
|
test({ target, window, assert, component }) {
|
||||||
|
|
||||||
|
function assert_slider_1() {
|
||||||
|
const railColor1 = target.querySelector('#component1 p');
|
||||||
|
const trackColor1 = target.querySelector('#component1 span');
|
||||||
|
const railColor2 = target.querySelector('#component2 p');
|
||||||
|
const trackColor2 = target.querySelector('#component2 span');
|
||||||
|
|
||||||
|
assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
|
||||||
|
assert.equal(railColor1.textContent, 'Slider1');
|
||||||
|
assert.equal(railColor2.textContent, 'Slider1');
|
||||||
|
}
|
||||||
|
|
||||||
|
function assert_slider_2() {
|
||||||
|
const railColor1 = target.querySelector('#component1 p');
|
||||||
|
const trackColor1 = target.querySelector('#component1 span');
|
||||||
|
const railColor2 = target.querySelector('#component2 p');
|
||||||
|
const trackColor2 = target.querySelector('#component2 span');
|
||||||
|
|
||||||
|
assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
|
||||||
|
assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
|
||||||
|
assert.equal(railColor1.textContent, 'Slider2');
|
||||||
|
assert.equal(railColor2.textContent, 'Slider2');
|
||||||
|
}
|
||||||
|
|
||||||
|
assert_slider_1();
|
||||||
|
component.componentName = 'Slider2';
|
||||||
|
assert_slider_2();
|
||||||
|
component.componentName = undefined;
|
||||||
|
assert.equal(window.document.querySelector('div'), null);
|
||||||
|
component.componentName = 'Slider1';
|
||||||
|
assert_slider_1();
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<script>
|
||||||
|
import Slider1 from './Slider1.svelte';
|
||||||
|
import Slider2 from './Slider2.svelte';
|
||||||
|
export let componentName = 'Slider1';
|
||||||
|
$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<svelte:component
|
||||||
|
this={slider}
|
||||||
|
id="component1"
|
||||||
|
--rail-color="rgb(0, 0, 0)"
|
||||||
|
--track-color="rgb(255, 0, 0)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<svelte:component
|
||||||
|
this={slider}
|
||||||
|
id="component2"
|
||||||
|
--rail-color="rgb(0, 255, 0)"
|
||||||
|
--track-color="rgb(0, 0, 255)"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<script>
|
||||||
|
export let id;
|
||||||
|
export let count = 0;
|
||||||
|
export let railColor1;
|
||||||
|
export let trackColor1;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div {id}>
|
||||||
|
<p>Slider</p>
|
||||||
|
<span>Track</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if count === 0}
|
||||||
|
<svelte:self
|
||||||
|
id="nest-{id}"
|
||||||
|
count="{count + 1}"
|
||||||
|
--rail-color={railColor1}
|
||||||
|
--track-color={trackColor1}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
color: var(--rail-color);
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: var(--track-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
railColor1: 'black',
|
||||||
|
trackColor1: 'red',
|
||||||
|
railColor2: 'green',
|
||||||
|
trackColor2: 'blue',
|
||||||
|
nestRailColor1: 'white',
|
||||||
|
nestTrackColor1: 'gray',
|
||||||
|
nestRailColor2: 'aqua',
|
||||||
|
nestTrackColor2: 'pink'
|
||||||
|
},
|
||||||
|
html: `
|
||||||
|
<div style="display: contents; --rail-color:black; --track-color:red;">
|
||||||
|
<div id="slider-1">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:white; --track-color:gray;">
|
||||||
|
<div id="nest-slider-1">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:green; --track-color:blue;">
|
||||||
|
<div id="slider-2">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:aqua; --track-color:pink;">
|
||||||
|
<div id="nest-slider-2">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
test({ component, assert, target }) {
|
||||||
|
component.railColor1 = 'yellow';
|
||||||
|
component.trackColor2 = 'orange';
|
||||||
|
component.nestRailColor1 = 'lime';
|
||||||
|
component.nestTrackColor2 = 'gold';
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div style="display: contents; --rail-color:yellow; --track-color:red;">
|
||||||
|
<div id="slider-1">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:lime; --track-color:gray;">
|
||||||
|
<div id="nest-slider-1">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:green; --track-color:orange;">
|
||||||
|
<div id="slider-2">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: contents; --rail-color:aqua; --track-color:gold;">
|
||||||
|
<div id="nest-slider-2">
|
||||||
|
<p class="svelte-17ay6rc">Slider</p>
|
||||||
|
<span class="svelte-17ay6rc">Track</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
<script>
|
||||||
|
import Slider from './Slider.svelte';
|
||||||
|
export let railColor1;
|
||||||
|
export let railColor2;
|
||||||
|
export let trackColor1;
|
||||||
|
export let trackColor2;
|
||||||
|
export let nestRailColor1;
|
||||||
|
export let nestRailColor2;
|
||||||
|
export let nestTrackColor1;
|
||||||
|
export let nestTrackColor2;
|
||||||
|
|
||||||
|
function identity(color) {
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Slider
|
||||||
|
id="slider-1"
|
||||||
|
--rail-color={railColor1}
|
||||||
|
--track-color={trackColor1}
|
||||||
|
railColor1={nestRailColor1}
|
||||||
|
trackColor1={nestTrackColor1}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<svelte:component
|
||||||
|
this={Slider}
|
||||||
|
id="slider-2"
|
||||||
|
--rail-color={railColor2}
|
||||||
|
--track-color={identity(trackColor2)}
|
||||||
|
railColor1={nestRailColor2}
|
||||||
|
trackColor1={nestTrackColor2}
|
||||||
|
/>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue