🎉 2.0.0 New Feature that can use on React-Three-Fiber, Javascript & even Typescript as well!

[ammein]

I made a monorepo package on easy to just publish one npm package but can import different usage types such as React, Javascript and Typescript as well! This can help all react-three-fiber coders use GlslPipeline immediately!!!!

CHANGELOG:

• Added typescript supported to the package
• Added Preconstruct cli on easy manage package and test the examples file live without using npm link.
• Added manypkg that can check monorepo status.
• Added directory symlink to README.md & LICENSE.md due to that files located on inner directories.
• Added copywriting for README.md file for easy instructions on what to do when install the package.
• Added changesets/cli on easy publish monorepo package by simply run simple commands. Please check CONTRIBUTING.md file on how does the package & publishing works.
• Added new examples packages to test either react or vanilla packages (TODO: Add more Typescript examples)
• Added Babel config for build the package before publishing the package to npmjs.
• Added TSConfig for Typescript linting config.
• Added Github Actions to check on the package validation & also added 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. 😁

[patriciogonzalezvivo]

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

[ammein]

Absolutely! No breaking changes at all! They can use manually as they used to from V1 release. Only additional method in GlslPipeline class called:

• New Shader Material Options on GlslPipeline constructor new GlslPipeline(renderer, uniforms, options) so that developer can pass on Shader Material options such as wireframe:true to enable wireframe shader view on canvas. For uniforms and options argument, I maintain on keeping them optional argument.
• dispose() To dispose all texture, renderTargets & material useful in react environments.
• branchMaterial(name) can add either single string or an array of string. Useful for multiple defined conditions.

I already created changeset initializer using command changeset init. So you will release the package using changeset/cli commands:

# 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

Side Note: There are some grammars and docs that I need to fix. Later i will push the last code to fix all copywriting and adjust types-helper code.

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: glsl-pipeline-react

[patriciogonzalezvivo]

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.

[patriciogonzalezvivo]

@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! I love the fact that you manage to bring support for both TypeScript and React without sacrificing support for vanilla JS for dinosaur like me : ) . Thank you! This will make things better for a lot of people. I added a couple of comments, some propose some minor things. Once that's in I can merge, and then I will follow through your instructions on yarn to publish a new npm version. I might have questions at that point. Again thanks you!

[ammein]

All done! You can merge safely now @patriciogonzalezvivo 🥳

Changelog:

• All reviews for changes have been made.
• Update docs on grammar and add the Troubleshooting section in CONTRIBUTING.md.
• Update glsl-pipeline-react.tsx on useEffect that causes infinite loop re-render. Remove some dependency arrays that are causing the re-render and memory leaks. Now it is stable ❤️
• Add a new typescript example for GlslPipeline options. View and test the example package in examples/react-ts/typescript_shader_options.

[patriciogonzalezvivo]

Fantastic, let's do it <3 Thank you!

[patriciogonzalezvivo]

@ammein yarn changeset doesn't allow me to do glsl-pipeline, what am I doing wrong?

[ammein]

Ahh, I already did glsl-pipeline for you firsthand. You can just simply do yarn changeset publish for now. In future, if you want to publish again, you will need to do the yarn changeset first 👍🏻😁 Sorry for helping firsthand that confuses you @patriciogonzalezvivo

[patriciogonzalezvivo]

Awesome! Just publish works like a charm. Thank you so much!