aidanaden · aidanaden · Nov 16, 2024 · Nov 17, 2024 · Nov 17, 2024
diff --git a/.changeset/README.md b/.changeset/README.md
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,7 @@
+# solid-top-loading-bar
+
+## 0.5.0
+
+### Minor Changes
+
+- simplified loading bar compatible with solid-start based on setAnimationFrame
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 {{me}}
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,134 +1,36 @@
-# solid-top-loading-bar
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type={{name_of_lib}}&background=tiles&project=%20" alt="{{name_of_lib}}">
+</p>
 
->
-
-[![size](https://img.shields.io/bundlephobia/minzip/solid-top-loading-bar?style=for-the-badge)](https://bundlephobia.com/package/solid-top-loading-bar)
-[![size](https://img.shields.io/npm/v/solid-top-loading-bar?style=for-the-badge)](https://www.npmjs.com/package/solid-top-loading-bar)
-![npm](https://img.shields.io/npm/dw/solid-top-loading-bar?style=for-the-badge)
-
-[download-image]: https://img.shields.io/npm/dm/solid-top-loading-bar.svg
-[download-url]: https://npmjs.org/package/solid-top-loading-bar
+# {{name_of_lib}}
 
-[![solid-top-loading-bar](https://nodei.co/npm/solid-top-loading-bar.png)](https://npmjs.org/package/solid-top-loading-bar)
+[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
 
-This package was ported to Solid from the [react-top-loading-bar](https://github.com/klendi/react-top-loading-bar) package made by [Klendi Gocci](https://klendi.dev/)
+{{desc_of_lib}}
 
-## Install
-
-- using npm
+> **Note** After using this template, you have to search and replace all `{{name_of_lib}}` and similar strings
+> with appropriate texts.
+>
+> `{{name_of_lib}}` should be a **kebab-case** string representing the name of you monorepo.
+>
+> `{{desc_of_lib}}` should be a **Normal case** string with the description of the repository.
+>
+> `{{me}}` should be a **kebab-case** string from your profile URL.
 
-```bash
-npm install --save solid-top-loading-bar
-```
+## Quick start
 
-- using yarn
+Install it:
 
 ```bash
-yarn add solid-top-loading-bar
+npm i {{name_of_lib}}
+# or
+yarn add {{name_of_lib}}
+# or
+pnpm add {{name_of_lib}}
 ```
 
-- CDN
+Use it:
 
+```tsx
+import {{name_of_lib}} from '{{name_of_lib}}'
 ```
-https://unpkg.com/solid-top-loading-bar
-```
-
-## Usage
-
-### With ref
-
-```jsx
-import LoadingBar, { LoadingBarRef } from "solid-top-loading-bar";
-
-const App = () => {
-  const [loadingBar, setLoadingBar] = createSignal<LoadingBarRef>()
-
-  return (
-    <div>
-      <LoadingBar color="#f11946" loadingBar={loadingBar()} setLoadingBar={setLoadingBar} />
-      <button onClick={() => loadingBar()?.continuousStart()}>
-        Start Continuous Loading Bar
-      </button>
-      <button onClick={() => loadingBar()?.staticStart()}>
-        Start Static Loading Bar
-      </button>
-      <button onClick={() => loadingBar()?.complete()}>Complete</button>
-      <br />
-    </div>
-  );
-};
-
-export default App;
-```
-
-### With state
-
-```jsx
-import { createSignal } from "solid";
-import LoadingBar from "solid-top-loading-bar";
-
-const App = () => {
-  const [progress, setProgress] = createSignal(0);
-
-  return (
-    <div>
-      <LoadingBar
-        color="#f11946"
-        progress={progress()}
-        onLoaderFinished={() => setProgress(0)}
-      />
-      <button onClick={() => setProgress((p) => p + 10)}>Add 10%</button>
-      <button onClick={() => setProgress((p) => p + 20)}>Add 20%</button>
-      <button onClick={() => setProgress(100)}>Complete</button>
-      <br />
-    </div>
-  );
-};
-
-export default App;
-```
-
-## Demo
-
-[Click here for demo](https://solid-top-loading-bar.vercel.app/)
-
-## Built-in Methods
-
-| Methods                                     |             Parameters              | Descriptions                                                                                                                                                                                                                |
-| ------------------------------------------- | :---------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| add(value)                                  |               Number                | Adds a value to the loading indicator.                                                                                                                                                                                      |
-| decrease(value)                             |               Number                | Decreases a value to the loading indicator.                                                                                                                                                                                 |
-| continuousStart(startingValue, refreshRate) | Number (optional), Number(optional) | Starts the loading indicator with a random starting value between 20-30, then repetitively after an refreshRate, increases it by a random value between 2-10. This continues until it reaches 90% of the indicator's width. |
-| staticStart(startingValue)                  |          Number (optional)          | Starts the loading indicator with a random starting value between 30-50.                                                                                                                                                    |
-| complete()                                  |                                     | Makes the loading indicator reach 100% of his width and then fade.                                                                                                                                                          |
-
-## Properties
-
-| Property           | Type          | Default | Description                                                                                                                       |
-| :----------------- | :------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------- |
-| progress           | Number        | `0`     | The progress/width indicator, progress prop varies from `0` to `100`.                                                             |
-| color              | String        | `red`   | The color of the loading bar, color take values like css property `background:` do, for example `red`, `#000` `rgb(255,0,0)` etc. |
-| shadow             | Boolean       | `true`  | Enables / Disables shadow underneath the loader.                                                                                  |
-| height             | Number        | `2`     | The height of the loading bar in pixels.                                                                                          |
-| background         | String        | `3`     | The loader parent background color.                                                                                               |
-| style              | CSSProperties |         | The style attribute to loader's div                                                                                               |
-| containerStyle     | CSSProperties |         | The style attribute to loader's container                                                                                         |
-| shadowStyle        | CSSProperties |         | The style attribute to loader's shadow                                                                                            |
-| transitionTime     | Number        | `300`   | Fade transition time in miliseconds.                                                                                              |
-| loaderSpeed        | Number        | `500`   | Loader transition speed in miliseconds.                                                                                           |
-| waitingTime        | Number        | `1000`  | The delay we wait when bar reaches 100% before we proceed fading the loader out.                                                  |
-| className          | String        |         | You can provide a class you'd like to add to the loading bar to add some styles to it                                             |
-| containerClassName | String        |         | You can provide a class you'd like to add to the loading bar container to add some css styles                                     |
-| onLoaderFinished   | Function      |         | This is called when the loading bar completes, reaches 100% of his width.                                                         |
-
-## Projects using solid-top-loading-bar
-
-Add your own project. Make a PR
-
-## Code Style
-
-[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)
-
-## License
-
-MIT © aidanaden
diff --git a/dev/.gitignore b/dev/.gitignore
@@ -0,0 +1,29 @@
+
+dist
+.solid
+.output
+.vercel
+.netlify
+.vinxi
+app.config.timestamp_*.js
+
+# Environment
+.env
+.env*.local
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# Temp
+gitignore
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/dev/README.md b/dev/README.md
@@ -0,0 +1,32 @@
+# SolidStart
+
+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+
+## Creating a project
+
+```bash
+# create a new project in the current directory
+npm init solid@latest
+
+# create a new project in my-app
+npm init solid@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Solid apps are built with _presets_, which optimise your project for deployment to different environments.
+
+By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
+
+## This project was created with the [Solid CLI](https://solid-cli.netlify.app)
diff --git a/dev/app.config.ts b/dev/app.config.ts
@@ -0,0 +1,78 @@
+import { defineConfig } from "@solidjs/start/config";
+
+export default defineConfig({
+  /**
+   *	Toggle between client and server rendering.
+   *	@default true
+   */
+  ssr: true,
+
+  /**
+   * Configuration object for [vite-plugin-solid](https://github.com/solidjs/vite-plugin-solid)
+   */
+  solid: {},
+
+  /**
+   * Array of file extensions to be treated as routes.
+   * @default ["js", "jsx", "ts", "tsx"]
+   */
+  extensions: ["js", "jsx", "ts", "tsx"],
+
+  /**
+   * Nitro server config options
+   *
+   * @see https://nitro.unjs.io/config
+   */
+  server: {
+    preset: "cloudflare-pages",
+    esbuild: {
+      options: {
+        // We need BigInt support (default: 2019)
+        target: "esnext",
+      },
+    },
+  },
+
+  /**
+   * The path to the root of the application.
+   *
+   * @default "./src"
+   */
+  appRoot: "./src",
+
+  /**
+   * The path to where the routes are located.
+   *
+   * @default "./routes"
+   */
+  routeDir: "./routes",
+
+  /**
+   * The path to an optional middleware file.
+   */
+  middleware: undefined,
+
+  /**
+   * Toggle the dev overlay.
+   *
+   * @default true
+   */
+  devOverlay: true,
+
+  experimental: {
+    /**
+     * Enable "islands" mode.
+     */
+    islands: false,
+  },
+
+  /**
+   *	Vite config object. Can be configured for each router which has
+   *	the string value "server", "client" or "server-function"`
+   *
+   *	@see https://vitejs.dev/config/shared-options.html
+   */
+  vite: {
+    plugins: [],
+  },
+});
diff --git a/dev/package.json b/dev/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "example-with-tailwindcss",
+  "type": "module",
+  "scripts": {
+    "dev": "vinxi dev",
+    "build": "vinxi build",
+    "start": "vinxi start"
+  },
+  "dependencies": {
+    "@solidjs/router": "^0.15.0",
+    "@solidjs/start": "^1.0.10",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "solid-js": "^1.9.2",
+    "tailwindcss": "^3.4.3",
+    "vinxi": "^0.4.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "wrangler": "^3.87.0"
+  }
+}