-
-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🎉 2.0.0 New Feature that can use on React-Three-Fiber, Javascript & even Typescript as well! #3
Conversation
…nd inside 'examples' folder. Then install all dependencies including 'glsl-pipeline'. Don't worry, it is actually grab local package as workspaces testing. No need to do 'npm-link'
ipt and dispose method
… Also adjust examples codes
…act. Also add another parent memo for GlslPipelineReact on 'props' issue re-render on 'useMemo'. Also adjust typescript to have THREE.ShaderMaterial attached on react so that user can get lint on what to apply options on GlslPipelineReact.
… can make a pull request
Oh wow! Thank you so much @ammein ! this is wonderful. This means once pushed to npm regular JS + threeJs projects will still be supported in the same way? Excuse my ignorance respect to Web development |
Absolutely! No breaking changes at all! They can use manually as they used to from V1 release. Only additional method in GlslPipeline class called:
I already created changeset initializer using command # Build the package first
yarn build
# For contributor, run
yarn changeset
# For maintainers release package
yarn changeset version
# For maintainers, contributors and owners to release package
yarn changeset publish
Aren't you excited?! I myself can't wait to use this on my project! 🥳 You can explore more on my forked repo for this pull request: |
Yes I am! This is truly wonderful! Thank you so much. This will allow to use glsl-pipeline in so many project! You really have taken things project to the next level. Incredible work architecting the multiple release and examples too. |
package/LICENSE.md
Outdated
@@ -0,0 +1,7 @@ | |||
The MIT License (MIT) Copyright (c) 2023 Amin Shazrin |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let's keep the original license as is:
The MIT License (MIT) Copyright (c) 2023 Patricio Gonzalez Vivo
....
LICENSE.md
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Based on the behavior on https://github.com/ammein/glsl-pipeline-react seams Github don't automatically picks up the LICENSE.md when is a symbolic link. Let's leave a copy on the root folder just for visibility
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) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice addition! so this is used through yarn
to build the packages for JS, TS and React. Right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This one is automatically generated by using command yarn changeset
. Leave it as it is so that changeset can find this folder with its auto-generated README.md inside .changeset
folder.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice!
- name: Install and Build 🔨 | ||
run: | | ||
yarn | ||
yarn ci |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for adding CI to it!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No Problem! It looks similar to npm run ci
! This script will validate & check the packages, and finally test build the package to see if it is a successful build or not when pushed to the main branch Git Hub.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice!
"vite": "^4.4.5" | ||
}, | ||
"dependencies": { | ||
"@react-three/fiber": "^8.15.11", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is react-three/fiber
required here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good one! I ran the script from the '/scripts/updateAll.sh' file that runs every /examples/**
folder to add/update packages needed for each examples. Maybe I need to tweak the bash file to run specific package folder on each framework examples.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
got it
"version": "1.0.6", | ||
"description": "Prototype complex pipelines directly from a single shader by branching it into stages.", | ||
"name": "glsl-pipeline-monorepo", | ||
"private": true, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, I get it, at this level the package is private
and contain the other 3 packates (vanilla JS, TS and React). That's why is a monorepo
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Absolutely! The root folder wouldn't publish to npm package due to its private package. Only public packages & allow public access to be publish on npmjs. Simply run the command as I suggested 😁
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fantastic
"main": "index.js", | ||
"license": "MIT", | ||
"author": "Patricio Gonzalez Vivo <patriciogonzalezvivo@gmail.com>", | ||
"maintainers": [ | ||
"Amin Shazrin (https://github.com/ammein)" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
add me and @marioecg ( https://github.com/marioecg ) here please. Mario helped a big deal on the first version.
], | ||
"devDependencies": { | ||
"vite": "^4.4.9", | ||
"resolve-lygia": "^1.0.4" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If I understand correctly resolve-lygia
is not really necessary here. Right?
```js | ||
import { GlslPipeline } from 'glsl-pipeline'; | ||
import { GlslPipelineReact } from 'glsl-pipeline/r3f'; | ||
import { GlslPipelineClass } from 'glsl-pipeline/types'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
types
stands for TypeScript? right?
u_speed: { value: 0.5 }, | ||
... | ||
},{ | ||
side: THREE.DoubleSide, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice addition
✅ "dev-vanilla": "preconstruct dev && yarn workspace <package-name> dev", | ||
} | ||
``` | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's add here:
## Acknowledgements
Special thanks to main contributors:
* [Amin Shazrin](https://github.com/ammein/)
* [Mario Carrillo](https://github.com/marioecg)
* [Matt Henderson](https://github.com/matthen)
@ammein I took a look to the code. Fantastic job! I get it now (or at least I think I do, hehehe) this is massive upgrade! |
All done! You can merge safely now @patriciogonzalezvivo 🥳 Changelog:
|
Fantastic, let's do it <3 |
@ammein |
Ahh, I already did |
Awesome! Just publish works like a charm. Thank you so much! |
I made a monorepo package on easy to just publish one npm package but can import different usage types such as
React
,Javascript
andTypescript
as well! This can help all react-three-fiber coders useGlslPipeline
immediately!!!!CHANGELOG:
npm link
.manypkg
that can check monorepo status.README.md
&LICENSE.md
due to that files located on inner directories.README.md
file for easy instructions on what to do when install the package.changesets/cli
on easy publish monorepo package by simply run simple commands. Please checkCONTRIBUTING.md
file on how does the package & publishing works.react
orvanilla
packages (TODO: Add more Typescript examples)FUNDING.yml
to have sponsor button available on this github repo.Please refer to
/package/CONTRIBUTING.md
file to know about this new monorepo style & how is it going to publish. You can reach me anytime to work on this together. 😁