Add files via upload

arperyan · Jun 21, 2021 · 224ce6b · 224ce6b
commit 224ce6b
Show file tree

Hide file tree

Showing 16 changed files with 422 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# svelte-web-comp-vite
+
diff --git a/dist/count-btn.es.js b/dist/count-btn.es.js
diff --git a/dist/count-btn.umd.js b/dist/count-btn.umd.js
diff --git a/dist/favicon.ico b/dist/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/dist/count-btn.umd.js"></script>
+  </body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "count-btn",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/count-btn.js",
+  "module": "./dist/count-btn.es.js",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11",
+    "svelte": "^3.37.0",
+    "vite": "^2.3.7"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.svelte b/src/App.svelte
@@ -0,0 +1,48 @@
+<svelte:options tag="svelte-app" />
+
+<script>
+  import logo from "./assets/svelte.png";
+  import Counter from "./lib/Counter.svelte";
+  export let count = 0;
+</script>
+
+<main>
+  <img src={logo} alt="Svelte Logo" />
+  <h1>Hello world!</h1>
+
+  <count-btn {count} />
+</main>
+
+<style>
+  :root {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+
+  img {
+    height: 16rem;
+    width: 16rem;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4rem;
+    font-weight: 100;
+    line-height: 1.1;
+    margin: 2rem auto;
+    max-width: 14rem;
+  }
+
+  @media (min-width: 480px) {
+    h1 {
+      max-width: none;
+    }
+  }
+</style>
diff --git a/src/assets/svelte.png b/src/assets/svelte.png
diff --git a/src/lib/Counter.svelte b/src/lib/Counter.svelte
@@ -0,0 +1,36 @@
+<svelte:options tag="count-btn" />
+
+<script>
+  export let count = 0;
+  const increment = () => {
+    count = +count + 1;
+  };
+</script>
+
+<button class="button" on:click={increment}>
+  Clicks: {count}
+</button>
+
+<style>
+  .button {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 1em 2em;
+    color: #ff3e00;
+    background-color: rgba(255, 62, 0, 0.1);
+    border-radius: 2em;
+    border: 2px solid rgba(255, 62, 0, 0);
+    outline: none;
+    width: 200px;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+
+  .button:focus {
+    border: 2px solid #ff3e00;
+  }
+
+  .button:active {
+    background-color: rgba(255, 62, 0, 0.2);
+  }
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,5 @@
+import App from "./App.svelte";
+
+const app = new App();
+
+export default app;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="svelte" />
		/// <reference types="vite/client" />