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

ammein · 2023-11-17T18:54:04Z

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. 😁

…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'

… working

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

patriciogonzalezvivo · 2023-11-17T19:48:30Z

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 · 2023-11-18T05:31:08Z

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 · 2023-11-18T11:10:19Z

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 · 2023-11-18T13:31:47Z

package/LICENSE.md

@@ -0,0 +1,7 @@
+The MIT License (MIT) Copyright (c) 2023 Amin Shazrin


let's keep the original license as is:

The MIT License (MIT) Copyright (c) 2023 Patricio Gonzalez Vivo ....

patriciogonzalezvivo · 2023-11-18T13:36:17Z

LICENSE.md

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

patriciogonzalezvivo · 2023-11-18T13:39:22Z

.changeset/README.md

+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)


Nice addition! so this is used through yarn to build the packages for JS, TS and React. Right?

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.

patriciogonzalezvivo · 2023-11-18T13:39:42Z

.github/workflows/main.yml

+      - name: Install and Build 🔨
+        run: |
+          yarn
+          yarn ci


Thanks for adding CI to it!

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.

patriciogonzalezvivo · 2023-11-18T13:41:24Z

examples/vanilla/2d_clock/package.json

+    "vite": "^4.4.5"
+  },
+  "dependencies": {
+    "@react-three/fiber": "^8.15.11",


Is react-three/fiber required here?

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.

patriciogonzalezvivo · 2023-11-18T13:43:37Z

package.json

-  "version": "1.0.6",
-  "description": "Prototype complex pipelines directly from a single shader by branching it into stages.",
+  "name": "glsl-pipeline-monorepo",
+  "private": true,


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

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 😁

patriciogonzalezvivo · 2023-11-18T13:48:07Z

package.json

  "main": "index.js",
  "license": "MIT",
  "author": "Patricio Gonzalez Vivo <patriciogonzalezvivo@gmail.com>",
+  "maintainers": [
+    "Amin Shazrin (https://github.com/ammein)"


add me and @marioecg ( https://github.com/marioecg ) here please. Mario helped a big deal on the first version.

patriciogonzalezvivo · 2023-11-18T13:48:56Z

package.json

-  ],
-  "devDependencies": {
-    "vite": "^4.4.9",
-    "resolve-lygia": "^1.0.4"


If I understand correctly resolve-lygia is not really necessary here. Right?

patriciogonzalezvivo · 2023-11-18T13:49:37Z

package/CONTRIBUTING.md

+```js
+import { GlslPipeline } from 'glsl-pipeline';
+import { GlslPipelineReact } from 'glsl-pipeline/r3f';
+import { GlslPipelineClass } from 'glsl-pipeline/types';


types stands for TypeScript? right?

patriciogonzalezvivo · 2023-11-18T13:51:42Z

package/README.md

+    u_speed: { value: 0.5 },
+    ...
+},{
+    side: THREE.DoubleSide,


nice addition

patriciogonzalezvivo · 2023-11-18T13:55:23Z

package/README.md

+    ✅ "dev-vanilla": "preconstruct dev && yarn workspace <package-name> dev",
+}
+```
+


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)

patriciogonzalezvivo · 2023-11-18T14:06:21Z

@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 · 2023-11-18T20:05:02Z

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 · 2023-11-18T20:20:04Z

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

patriciogonzalezvivo · 2023-11-18T20:25:27Z

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

ammein · 2023-11-18T20:28:28Z

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 · 2023-11-18T20:30:32Z

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

ammein added 30 commits November 8, 2023 20:05

Add React Package'

6c30973

Remove package-lock.json

ac4b70b

Adjust config

0b053e5

Done making GlslPipeline React & Vanilla

1afb224

Adjust package and JSON

687498d

Adjust and adjust and still not working. Hmmm

747fd51

Ahh, later sambung

2836ebb

Adjust config again...

7bc6784

Adjust Typescript again

02d6d26

Hmmmm

4e47a98

Adjust Typescript again

e6033c8

Readjust modules to be more proper

779e477

Make more vanilla modules

e91218a

adjust rollup and symlink markdown directories

b4115e1

Done make complete module. Now what's left is to test

794cc2c

Make Symlinks

2d0c12c

Finally! Symlink works using

7cf3fc8

Later continue

2261e9b

Update package

c9f3955

Update commonjs

ade4efb

Wow! Test is actually simple! By using 'npm create-vite@latest' comma…

8cd39a8

…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'

React example working. Just need to continue react example test to be…

728d37d

… working

Adjust typescr

2511262

ipt and dispose method

Add config settings and adjust rollup configs. Also adjust ouputs

c6df79e

Add Helper for checking isPerspectiveCamera and isOrthographicCamera.…

8884403

… Also adjust examples codes

Finally, it works now

9354e26

Adjust render & typescript props

53f8f2a

Add typescript, adjust types, and also adjust README.md

6692dce

Clean push

2ff7695

Will continue on POSTPROCESSING example

eb241ad

ammein added 7 commits November 17, 2023 05:18

Add new example to continue

6915fbe

Clean push

71f4af9

Add Yarn Lock because my workflow needs the cache folder

9ab9a6c

Add new types, later continue on shaderMaterial options

28691c4

Finally done making new readme, add changesets, adjust types. Finally…

f6e7aa8

… can make a pull request

Remove options from 2d_clock

34efb32

patriciogonzalezvivo reviewed Nov 18, 2023

View reviewed changes

All changes done

4d907d5

Adjust link in README.md to CONTRIBUTING.md

1ab49f1

patriciogonzalezvivo merged commit 3ceae83 into patriciogonzalezvivo:main Nov 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ammein commented Nov 17, 2023

patriciogonzalezvivo commented Nov 17, 2023

ammein commented Nov 18, 2023 •

edited

Loading

patriciogonzalezvivo commented Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

ammein Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

ammein Nov 18, 2023 •

edited

Loading

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

ammein Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023 •

edited

Loading

ammein Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023

patriciogonzalezvivo Nov 18, 2023 •

edited

Loading

patriciogonzalezvivo commented Nov 18, 2023 •

edited

Loading

ammein commented Nov 18, 2023 •

edited

Loading

patriciogonzalezvivo commented Nov 18, 2023

patriciogonzalezvivo commented Nov 18, 2023

ammein commented Nov 18, 2023 •

edited

Loading

patriciogonzalezvivo commented Nov 18, 2023

		@@ -0,0 +1,7 @@
		The MIT License (MIT) Copyright (c) 2023 Amin Shazrin

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

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

Conversation

ammein commented Nov 17, 2023

patriciogonzalezvivo commented Nov 17, 2023

ammein commented Nov 18, 2023 • edited Loading

patriciogonzalezvivo commented Nov 18, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ammein Nov 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patriciogonzalezvivo Nov 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patriciogonzalezvivo Nov 18, 2023 • edited Loading

Choose a reason for hiding this comment

patriciogonzalezvivo commented Nov 18, 2023 • edited Loading

ammein commented Nov 18, 2023 • edited Loading

patriciogonzalezvivo commented Nov 18, 2023

patriciogonzalezvivo commented Nov 18, 2023

ammein commented Nov 18, 2023 • edited Loading

patriciogonzalezvivo commented Nov 18, 2023

ammein commented Nov 18, 2023 •

edited

Loading

ammein Nov 18, 2023 •

edited

Loading

patriciogonzalezvivo Nov 18, 2023 •

edited

Loading

patriciogonzalezvivo Nov 18, 2023 •

edited

Loading

patriciogonzalezvivo commented Nov 18, 2023 •

edited

Loading

ammein commented Nov 18, 2023 •

edited

Loading

ammein commented Nov 18, 2023 •

edited

Loading