Skip to content

Commit

Permalink
feat: add svelte support (#198)
Browse files Browse the repository at this point in the history
* feat: add svelte support

---------

Co-authored-by: Cezar Augusto <boss@cezaraugusto.net>
  • Loading branch information
akadotsh and cezaraugusto authored Oct 4, 2024
1 parent 09ac34e commit 44d4169
Show file tree
Hide file tree
Showing 21 changed files with 717 additions and 10 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ For a preview of extensions running these technologies, see documentation about

| <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/a9e2541a-96f0-4caa-9fc9-5fc5c3e901c8" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/b42c5330-9e2a-4045-99c3-1f7d264dfaf4" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/f19edff3-9005-4f50-b05c-fba615896a7f" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/ff64721d-d145-4213-930d-e70193f8d57e" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/15f1314a-aa65-4ce2-a3f3-cf53c4f730cf" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/c5f8a127-3c2a-4ceb-bb46-948cf2c8bd89" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/de1082fd-7cf6-4202-8c12-a5c3cd3e5b42" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/78e5fe3d-dc79-4aa2-954e-1a5973d1d9db" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/8807efd9-93e5-4db5-a1d2-9ac524f7ecc2" width="70"> |
| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: |
| ESNext<br>✅ | TypeScript<br>✅ | WASM<br>✅ | React<br>✅ | Vue<br>✅ | Angular<br>👋 | Svelte<br>👋 | Solid<br>👋 | Preact<br>✅ |
| ESNext<br>✅ | TypeScript<br>✅ | WASM<br>✅ | React<br>✅ | Vue<br>✅ | Angular<br>👋 | Svelte<br>✅ | Solid<br>👋 | Preact<br>✅ |

👋 = PR Welcome!

Expand Down
9 changes: 9 additions & 0 deletions examples/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -355,6 +355,15 @@ const FRAMEWORK_TEMPLATES: Template[] = [
hasBackground: false,
hasEnv: false,
configFiles: ['postcss.config.js', 'tailwind.config.js', 'tsconfig.json']
},
{
name: 'new-svelte',
uiContext: ['newTab'],
uiFramework: 'svelte',
css: 'css',
hasBackground: false,
hasEnv: false,
configFiles: ['tsconfig.json']
}
]

Expand Down
31 changes: 31 additions & 0 deletions examples/new-svelte/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
node_modules

# testing
coverage

# production
dist

# misc
.DS_Store

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# lock files
yarn.lock
package-lock.json

# debug files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# extension.js
extension-env.d.ts
Binary file added examples/new-svelte/images/extension_48.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions examples/new-svelte/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"$schema": "https://json.schemastore.org/chrome-manifest.json",
"manifest_version": 3,
"version": "0.0.1",
"name": "New Tab Svelte",
"description": "An Extension.js example.",
"icons": {
"48": "images/extension_48.png"
},
"chrome_url_overrides": {
"newtab": "newtab/index.html"
}
}
18 changes: 18 additions & 0 deletions examples/new-svelte/newtab/NewTabApp.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script lang="ts">
let message = 'Welcome to your Svelte Extension.'
</script>

<header>
<h1>
<img class="svelte" src="/logo.png" alt="The Svelte logo" width="120px" />
<br />
{message}
</h1>
<p>
Learn more about creating browser extensions at
<a href="https://extension.js.org" target="_blank">
https://extension.js.org
</a>
.
</p>
</header>
13 changes: 13 additions & 0 deletions examples/new-svelte/newtab/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Svelte Template</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this extension.</noscript>
<div id="app"></div>
</body>
<script type="module" src="./script.ts"></script>
</html>
8 changes: 8 additions & 0 deletions examples/new-svelte/newtab/script.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import 'sakura.css'
import './styles.css'
import App from './NewTabApp.svelte'

Check failure on line 3 in examples/new-svelte/newtab/script.ts

View workflow job for this annotation

GitHub Actions / build (20)

Cannot find module './NewTabApp.svelte' or its corresponding type declarations.

const app = new App({
target: document.getElementById('app')!
})
export default app
85 changes: 85 additions & 0 deletions examples/new-svelte/newtab/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
html {
font-size: 62.5%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 4rem);
min-width: 300px;
padding: 2rem;
font-size: 1.8rem;
line-height: 1.618;
max-width: 38em;
margin: auto;
color: #c9c9c9;
background-color: #0a0c10;
}

@media (max-width: 684px) {
body {
font-size: 1.53rem;
}
}

@media (max-width: 382px) {
body {
font-size: 1.35rem;
}
}

h1 {
line-height: 1.1;
font-weight: 700;
margin-bottom: 1.5rem;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
font-size: 4.7em;
}

@media (max-width: 684px) {
h1 {
font-size: 2.7em;
}
}

p {
margin-top: 0px;
margin-bottom: 2.5rem;
}

a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
}

img {
height: auto;
max-width: 100%;
margin-top: 0px;
margin-bottom: 2.5rem;
}

@media (max-width: 684px) {
img {
margin-top: 2rem;
margin-bottom: 1rem;
}
}

body {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 4rem);
}

header > div {
display: flex;
align-items: center;
}
20 changes: 20 additions & 0 deletions examples/new-svelte/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"private": true,
"name": "new-tab",
"description": "An Extension.js example.",
"version": "0.0.1",
"author": {
"name": "Cezar Augusto",
"email": "boss@cezaraugusto.net",
"url": "https://cezaraugusto.com"
},
"license": "MIT",
"dependencies": {
"svelte": "4.2.19",
"sakura.css": "^1.5.0"
},
"devDependencies": {
"typescript": "5.3.3",
"@tsconfig/svelte": "5.0.4"
}
}
Binary file added examples/new-svelte/public/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions examples/new-svelte/template.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import path from 'path'
import {execSync} from 'child_process'
import {extensionFixtures} from '../extension-fixtures'

const exampleDir = 'examples/new-svelte'
const pathToExtension = path.join(__dirname, `dist/chrome`)
const test = extensionFixtures(pathToExtension, true)

test.beforeAll(async () => {
execSync(`pnpm extension build ${exampleDir}`, {
cwd: path.join(__dirname, '..')
})
})

test('should exist an element with the welcome message text', async ({
page
}) => {
await page.goto('chrome://newtab/')
const h1 = page.locator('h1')
await test.expect(h1).toContainText('Welcome to your')
})

test('should exist a default color value', async ({page}) => {
await page.goto('chrome://newtab/')
const h1 = page.locator('h1')
const color = await page.evaluate(
(locator) => {
return window.getComputedStyle(locator!).getPropertyValue('color')
},
await h1.elementHandle()
)
await test.expect(color).toEqual('rgb(201, 201, 201)')
})
23 changes: 23 additions & 0 deletions examples/new-svelte/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "react-jsx",
"lib": ["dom", "dom.iterable", "esnext"],
"moduleResolution": "node",
"module": "esnext",
"noEmit": true,
"resolveJsonModule": true,
"strict": true,
"target": "esnext",
"verbatimModuleSyntax": true,
"useDefineForClassFields": true,
"skipLibCheck": true
},
"include": ["./"],
"exclude": ["node_modules", "dist"]
}
2 changes: 1 addition & 1 deletion examples/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export type ConfigFiles =
export interface Template {
name: string
uiContext: UIContext[] | undefined
uiFramework: 'react' | 'preact' | 'vue' | undefined
uiFramework: 'react' | 'preact' | 'vue' | 'svelte' | undefined
css: 'css' | 'sass' | 'less' | 'stylus'
hasBackground: boolean
hasEnv: boolean
Expand Down
Loading

0 comments on commit 44d4169

Please sign in to comment.