Skip to content

Commit

Permalink
Update dependencies, add prettier and eslint, fix build
Browse files Browse the repository at this point in the history
  • Loading branch information
garth committed Jul 21, 2023
1 parent b6f9e2a commit faf890e
Show file tree
Hide file tree
Showing 43 changed files with 4,469 additions and 2,402 deletions.
6 changes: 6 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"semi": false,
"singleQuote": true,
"bracketSameLine": true,
"tabWidth": 2
}
11 changes: 8 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

<h1 align="center">solid-spring</h1>
<h3 align="center">A port of react-spring, for SolidJS</h3>

Expand All @@ -24,8 +23,8 @@ const styles = createSpring({
The API is similar to what we have in react-spring, with small differences to make the library compatible with SolidJS

## Preview
Click on the below gifs for exploring the code of each preview (ported from Poimandres examples).

Click on the below gifs for exploring the code of each preview (ported from Poimandres examples).

<p align="middle">
<a href="https://codesandbox.io/s/spring-gestures-5xb9p8"><img src="https://i.imgur.com/qLKJod3.gif" width="400"/></a>
Expand All @@ -37,6 +36,7 @@ Click on the below gifs for exploring the code of each preview (ported from Poim
```shell
npm install solid-spring
```

## Examples

[Hello (opacity animation)](https://codesandbox.io/s/hello-qe3eq5?file=/index.tsx)
Expand All @@ -48,10 +48,11 @@ npm install solid-spring
## API

### `createSpring`

> Turns values into animated-values.
```jsx
import { createSpring, animated } from "solid-spring";
import { createSpring, animated } from 'solid-spring'

function ChainExample() {
const styles = createSpring({
Expand All @@ -66,15 +67,19 @@ function ChainExample() {
return <animated.div style={styles()}>I will fade in and out</animated.div>
}
```

`createSpring` also takes a function in case you want to pass a reactive value as a style!

```jsx
const [disabled, setDisabled] = createSignal(false)

const styles = createSpring(() => ({
pause: disabled(),
}))
```

### `createSprings`

> Creates multiple springs, each with its own config. Use it for static lists, etc.
Similar to `useSprings` in react-spring, It takes number or a function that returns a number (for reactivity) as the first argument, and a list of springs or a function that returns a spring as the second argument.
Expand Down
2 changes: 1 addition & 1 deletion demo/.gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
node_modules
dist
dist
2 changes: 1 addition & 1 deletion demo/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down
24 changes: 12 additions & 12 deletions demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@
"name": "vite-template-solid",
"version": "0.0.0",
"description": "",
"license": "MIT",
"scripts": {
"start": "vite",
"dev": "vite",
"dev": "vite --clearScreen=false",
"build": "vite build",
"serve": "vite preview"
},
"license": "MIT",
"devDependencies": {
"typescript": "^4.6.3",
"vite": "^2.8.6",
"vite-plugin-solid": "^2.2.6"
"serve": "vite preview",
"prettier": "prettier --write \"src/**/*.{js,json,ts,tsx,css,scss,html}\""
},
"dependencies": {
"@react-spring/animated": "^9.4.4",
"@react-spring/core": "^9.4.4",
"solid-js": "^1.3.13",
"solid-spring": "workspace:^0.1.0"
"solid-js": "^1.7.8",
"solid-spring": "workspace:^"
},
"devDependencies": {
"prettier": "^3.0.0",
"typescript": "^5.1.6",
"vite": "^4.4.6",
"vite-plugin-solid": "^2.7.0"
}
}
23 changes: 10 additions & 13 deletions demo/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import {
Component,
createSignal,
} from "solid-js";
import { createSpring, animated, config } from "solid-spring";
import { Component, createSignal } from 'solid-js'
import { createSpring, animated, config } from 'solid-spring'

function ChainExample() {
const [flip, set] = createSignal(false);
const [flip, set] = createSignal(false)

const styles = createSpring(() => {
return {
Expand All @@ -16,16 +13,16 @@ function ChainExample() {
delay: 200,
config: config.molasses,
onRest: () => {
set(!flip());
set(!flip())
},
};
});
}
})

return <animated.h1 style={styles()}>hello</animated.h1>;
return <animated.h1 style={styles()}>hello</animated.h1>
}

const App: Component = () => {
return <ChainExample />;
};
return <ChainExample />
}

export default App;
export default App
6 changes: 3 additions & 3 deletions demo/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* @refresh reload */
import { render } from 'solid-js/web';
import { render } from 'solid-js/web'

import App from './App';
import App from './App'

render(() => <App />, document.getElementById('root') as HTMLElement);
render(() => <App />, document.getElementById('root') as HTMLElement)
10 changes: 6 additions & 4 deletions demo/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid'

export default defineConfig({
plugins: [solidPlugin()],
server: {
port: 3000,
},
build: {
target: 'esnext',
polyfillDynamicImport: false,
},
});
})
22 changes: 8 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,33 +1,27 @@
{
"name": "@monorepo/solid-spring",
"version": "0.0.0",
"description": "Like react-spring, but for SolidJS",
"info": "solid-spring is a spring-physics first animation library for SolidJS based on react-spring/core",
"license": "MIT",
"author": "M. Bagher Abiat",
"contributors": [],
"homepage": "https://github.com/aslemammad/solid-spring#readme",
"repository": {
"type": "git",
"url": "git+https://github.com/aslemammad/solid-spring.git"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/aslemammad/solid-spring/issues"
},
"homepage": "https://github.com/aslemammad/solid-spring#readme",
"description": "Like react-spring, but for SolidJS",
"info": "solid-spring is a spring-physics first animation library for SolidJS based on react-spring/core",
"contributors": [],
"scripts": {},
"keywords": [
"best_ecosystem",
"solidhack",
"react-spring",
"solid"
],
"author": "M. Bagher Abiat",
"license": "MIT",
"scripts": {},
"devDependencies": {
"@rollup/plugin-alias": "^3.1.9",
"@rollup/plugin-commonjs": "^21.0.2",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.1.3",
"esbuild": "^0.14.27",
"rollup-plugin-esbuild": "^4.8.2"
"prettier": "^3.0.0"
}
}
Loading

0 comments on commit faf890e

Please sign in to comment.