search

alvarotrigo / react-fullpage

Official React.js wrapper for fullPage.js https://alvarotrigo.com/react-fullpage/
GNU General Public License v3.0
1.29k stars 178 forks source link

Updating Examples - Adding Hooks #269

Closed jason-warner closed 3 years ago

jason-warner commented 3 years ago

Thought it would be helpful to update the packages in the examples and update them with react hooks.

Apparently these changes would have automatically merged with your master branch, but I wasn't quite able to merge these changes into a fork of the dev branch without entering a detached head state so apologies for that- this is my first pull request.

I tested with a fresh clone and it works good, although I did notice for both my fork and your original that the Gatsby example will not compile for development unless the root of the entire project has dependencies installed

alvarotrigo commented 3 years ago

Awesome! Thanks for that @jason-warner ! 👍 I really appreciate it! Not really using React on my daily tasks and I tend to update this a bit less often than I would like to!

In fact, it would also be good to update the core react-fullpage with hooks too, what do you think?

I tested with a fresh clone and it works good, although I did notice for both my fork and your original that the Gatsby example will not compile for development unless the root of the entire project has dependencies installed

Perhaps we could tackle this too?

alvarotrigo commented 3 years ago

Mmm. Having trouble building the files now. Perhaps I'm missing something?

First I updated webpack.config.build.js to make it work: image

Then, from the root folder:

npm install
npm run build:dev

Open file on /examples/react/dist/index.html.

image

jason-warner commented 3 years ago

Hey @alvarotrigo Sorry, I tried to replicate your issue and was not able to.

I did a fresh clone from my repo: git clone https://github.com/jason-warner/react-fullpage.git Then npm install from root directory I did this twice, once without changing anything in the webpack.config.build.js and once with making your changes Then I ran npm run build:dev Then I used right clicked the /examples/react/dist/index.html to open with Ritwick Dey's live server

examplePicture

I am on npm version 7.19.0 and node version v14.16.0

I wrote this on my macbook but just went through the steps above on my windows machine, I also tested this on chrome.

I am not very experienced in webpack I must say, but I would certainly enjoy updating the core react-fullpage with hooks as well, in some of my spare time

alvarotrigo commented 3 years ago

@jason-warner thanks! I'll check it out then! I'm using npm 6.14 so I'll double-check this again.

Btw, I wrote you an email ;)

jason-warner commented 3 years ago

@alvarotrigo I saw that, I replied :thumbsup:
Let me know if it's still not working after upgrading npm

alvarotrigo commented 3 years ago

I did a fresh clone from my repo: git clone https://github.com/jason-warner/react-fullpage.git

Are you on the dev branch? I'm trying to build it there before merging with the master.

alvarotrigo commented 3 years ago

to open with Ritwick Dey's live server

Why not just double-click it? Like we do on the master branch?

alvarotrigo commented 3 years ago

I am on npm version 7.19.0 and node version v14.16.0

Same node, just updated npm to the latest 7.24.0

alvarotrigo commented 3 years ago

Getting this when i build:

alvaro@MacBook-Pro-5 react-fullpage % npm run build:dev

> @fullpage/react-fullpage@0.1.20 build:dev
> npx webpack --progress --mode development --config webpack.config.dev.js

10% building 0/1 entries 1/1 dependencies 0/1 modules
WARNING (@babel/preset-env): We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

More info about useBuiltIns: https://babeljs.io/docs/en/babel-preset-env#usebuiltins
More info about core-js: https://babeljs.io/docs/en/babel-preset-env#corejs
@babel/preset-env: `DEBUG` option

Using targets:
{
  "android": "93",
  "chrome": "92",
  "edge": "92",
  "firefox": "90",
  "ios": "14",
  "opera": "77",
  "safari": "14.1",
  "samsung": "14"
}

Using modules transform: false

Using plugins:
  proposal-private-property-in-object { edge, ios, opera, safari, samsung }
  proposal-class-properties { ios, safari < 15, samsung }
  proposal-private-methods { ios, safari < 15, samsung }
  syntax-numeric-separator
  proposal-logical-assignment-operators { samsung }
  syntax-nullish-coalescing-operator
  proposal-optional-chaining { android, chrome, edge, opera, samsung }
  syntax-json-strings
  syntax-optional-catch-binding
  syntax-async-generators
  syntax-object-rest-spread
  proposal-export-namespace-from { ios, safari }
  syntax-dynamic-import
  syntax-top-level-await
corejs2: `DEBUG` option

Using targets: {
  "android": "93",
  "chrome": "92",
  "edge": "92",
  "firefox": "90",
  "ios": "14",
  "opera": "77",
  "safari": "14.1",
  "samsung": "14"
}

Using polyfills with `usage-global` method:

[/Users/alvaro/Sites/react-fullpage/examples/react/src/hooks.js]
The corejs2 polyfill added the following polyfills:
  web.dom.iterable { "android":"93", "chrome":"92", "edge":"92", "firefox":"90", "ios":"14", "opera":"77", "safari":"14.1", "samsung":"14" }

[/Users/alvaro/Sites/react-fullpage/components/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.
10% building 0/1 entries 6/9 dependencies 0/6 modules
[/Users/alvaro/Sites/react-fullpage/components/Wrapper/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.

[/Users/alvaro/Sites/react-fullpage/components/ReactFullpage/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.

[/Users/alvaro/Sites/react-fullpage/components/ReactFullpageShell/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.

[/Users/alvaro/Sites/react-fullpage/components/selectors.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.

[/Users/alvaro/Sites/react-fullpage/components/Logger/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.
asset bundle.js 2.46 MiB [compared for emit] (name: bundle)
asset index.html 261 bytes [compared for emit]
runtime modules 937 bytes 4 modules
modules by path ./examples/react/ 760 KiB 60 modules
modules by path ./node_modules/ 183 KiB
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
  modules by path ./node_modules/fullpage.js/ 102 KiB 5 modules
  modules by path ./node_modules/react/ 70.6 KiB 2 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 3.85 KiB 2 modules
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./components/ 8.43 KiB
  modules by path ./components/*.js 598 bytes
    ./components/index.js 439 bytes [built] [code generated]
    ./components/selectors.js 159 bytes [built] [code generated]
  4 modules
webpack 5.52.0 compiled successfully in 1390 ms
alvaro@MacBook-Pro-5 react-fullpage %
jason-warner commented 3 years ago

to open with Ritwick Dey's live server

Why not just double-click it? Like we do on the master branch?

I am just used to right clicking html files to open with a live server, but I get the same result when I copy the file path and append to "file:///"

I did a fresh clone from my repo: git clone https://github.com/jason-warner/react-fullpage.git

Are you on the dev branch? I'm trying to build it there before merging with the master.

Initially I was having trouble cloning the dev branch, so I cloned the master branch and made my commits there and made the pull request to your dev branch when I was done.

But just now I had better luck cloning your dev branch (with my commits you merged) with Github Desktop rather than the terminal, I did the same steps we mentioned (npm install, npm run build:dev) and I am not running into any issues/errors in compiling or otherwise

I deleted the existing examples/react/dist/bundle.js & examples/react/src/index.js and re-compiled just to be sure.

full term log:

scooterbean@Scooters-MBP react-fullpage % git status
On branch dev
Your branch is up to date with 'origin/dev'.

nothing to commit, working tree clean
scooterbean@Scooters-MBP react-fullpage % npm install
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated object-keys@0.2.0: Please update to the latest object-keys
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @babel/polyfill@7.12.1: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
npm WARN deprecated jest-dom@3.5.0: 🚨 jest-dom has moved to @testing-library/jest-dom. Please uninstall jest-dom and install @testing-library/jest-dom instead, or use an older version of jest-dom. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)
npm WARN deprecated react-testing-library@5.9.0: 🚨  react-testing-library has moved to @testing-library/react. Please uninstall react-testing-library and install @testing-library/react instead, or use an older version of react-testing-library. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)
npm WARN deprecated dom-testing-library@3.19.4: 🚨  dom-testing-library has moved to @testing-library/dom. Please uninstall dom-testing-library and install @testing-library/dom instead, or use an older version of dom-testing-library. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

added 1858 packages, and audited 1859 packages in 43s

174 packages are looking for funding
  run `npm fund` for details

12 vulnerabilities (6 moderate, 6 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
scooterbean@Scooters-MBP react-fullpage % npm run build:dev

> @fullpage/react-fullpage@0.1.20 build:dev
> npx webpack --progress --mode development --config webpack.config.dev.js

10% building 0/1 entries 1/1 dependencies 0/1 modules
WARNING (@babel/preset-env): We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

More info about useBuiltIns: https://babeljs.io/docs/en/babel-preset-env#usebuiltins
More info about core-js: https://babeljs.io/docs/en/babel-preset-env#corejs
@babel/preset-env: `DEBUG` option

Using targets:
{
  "android": "93",
  "chrome": "92",
  "edge": "92",
  "firefox": "90",
  "ios": "14",
  "opera": "77",
  "safari": "14.1",
  "samsung": "14"
}

Using modules transform: false

Using plugins:
  proposal-private-property-in-object { edge, ios, opera, safari, samsung }
  proposal-class-properties { ios, safari < 15, samsung }
  proposal-private-methods { ios, safari < 15, samsung }
  syntax-numeric-separator
  proposal-logical-assignment-operators { samsung }
  syntax-nullish-coalescing-operator
  proposal-optional-chaining { android, chrome, edge, opera, samsung }
  syntax-json-strings
  syntax-optional-catch-binding
  syntax-async-generators
  syntax-object-rest-spread
  proposal-export-namespace-from { ios, safari }
  syntax-dynamic-import
  syntax-top-level-await
corejs2: `DEBUG` option

Using targets: {
  "android": "93",
  "chrome": "92",
  "edge": "92",
  "firefox": "90",
  "ios": "14",
  "opera": "77",
  "safari": "14.1",
  "samsung": "14"
}

Using polyfills with `usage-global` method:

[/Users/scooterbean/Documents/GitHub/react-fullpage/examples/react/src/hooks.js]
The corejs2 polyfill added the following polyfills:
  web.dom.iterable { "android":"93", "chrome":"92", "edge":"92", "firefox":"90", "ios":"14", "opera":"77", "safari":"14.1", "samsung":"14" }
10% building 0/1 entries 1/2 dependencies 0/1 modules
[/Users/scooterbean/Documents/GitHub/react-fullpage/components/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.
10% building 0/1 entries 6/9 dependencies 0/6 modules
[/Users/scooterbean/Documents/GitHub/react-fullpage/components/ReactFullpage/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.

[/Users/scooterbean/Documents/GitHub/react-fullpage/components/ReactFullpageShell/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.

[/Users/scooterbean/Documents/GitHub/react-fullpage/components/Wrapper/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.
10% building 0/1 entries 61/77 dependencies 9/41 modules
[/Users/scooterbean/Documents/GitHub/react-fullpage/components/selectors.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.

[/Users/scooterbean/Documents/GitHub/react-fullpage/components/Logger/index.js]
Based on your code and targets, the corejs2 polyfill did not add any polyfill.
asset bundle.js 2.88 MiB [emitted] (name: bundle)
asset index.html 261 bytes [emitted]
runtime modules 937 bytes 4 modules
modules by path ./node_modules/ 1.08 MiB 69 modules
modules by path ./components/ 8.43 KiB
  modules by path ./components/*.js 598 bytes
    ./components/index.js 439 bytes [built] [code generated]
    ./components/selectors.js 159 bytes [built] [code generated]
  ./components/Wrapper/index.js 197 bytes [built] [code generated]
  ./components/ReactFullpage/index.js 7.02 KiB [built] [code generated]
  ./components/ReactFullpageShell/index.js 524 bytes [built] [code generated]
  ./components/Logger/index.js 123 bytes [built] [code generated]
modules by path ./examples/react/src/ 5.71 KiB
  ./examples/react/src/hooks.js 2.88 KiB [built] [code generated]
  ./examples/react/src/styles.css 1.22 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./examples/react/src/styles.css 1.62 KiB [built] [code generated]
webpack 5.52.0 compiled successfully in 3637 ms
compiled devBranch
alvarotrigo commented 3 years ago

Fixed! No idea what was going on. I tried multiple things but nothing worked. So ended up removing the whole folder and doing a fresh clone. Thanks for that anyways! 👍

I'll merge it on the master branch now.

alvarotrigo commented 3 years ago

Mmm. When running npm run build to generate the dist files. I notice there are a couple of issues. I've fixed them, but now I see the file /dist/react-fullpage-umd.js gets removedand it won't be generated anymore.

Any idea why?

image

image

jason-warner commented 3 years ago

@alvarotrigo Ah, that's on me for only testing the development build, I am getting the same result of only one output file. I updated my webpack config with your two updates as well as my package.json (just removed the -p flag as --mode production was already present)

I did notice that it doesn't seem to be a particular issue with the umd output, since I can swap the order of the two output objects and then I only get the umd output file.

I was trying a few things out from the following links, but it doesn't seem to want to export more than one file :

https://tech.trivago.com/2015/12/17/export-multiple-javascript-module-formats/ https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations

webpack

I'm sure I can figure it out but it might take a little more of a deep dive into the webpack configuration

Also: For the current master branch (w/o the updates or my commits) when I run the prod build it gives me both the output files but throws errors and doesn't render when I go view the index.html

Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_8___default.a is undefined
    <anonymous> file:////Users/scooterbean/Documents/Dev/open-source/fullpagejs/testing/react-fullpage/dist/react-fullpage-umd.js:2359
    __webpack_require__ file:////Users/scooterbean/Documents/Dev/open-source/fullpagejs/testing/react-fullpage/dist/react-fullpage-umd.js:37
    default file:////Users/scooterbean/Documents/Dev/open-source/fullpagejs/testing/react-fullpage/dist/react-fullpage-umd.js:1069
    <anonymous> file:////Users/scooterbean/Documents/Dev/open-source/fullpagejs/testing/react-fullpage/dist/react-fullpage-umd.js:1070
    __webpack_require__ file:////Users/scooterbean/Documents/Dev/open-source/fullpagejs/testing/react-fullpage/dist/react-fullpage-umd.js:37
    <anonymous> file:////Users/scooterbean/Documents/Dev/open-source/fullpagejs/testing/react-fullpage/dist/react-fullpage-umd.js:101
    <anonymous> file:////Users/scooterbean/Documents/Dev/open-source/fullpagejs/testing/react-fullpage/dist/react-fullpage-umd.js:104
    webpackUniversalModuleDefinition file:////Users/scooterbean/Documents/Dev/open-source/fullpagejs/testing/react-fullpage/dist/react-fullpage-umd.js:16
    <anonymous> file:////Users/scooterbean/Documents/Dev/open-source/fullpagejs/testing/react-fullpage/dist/react-fullpage-umd.js:17
alvarotrigo commented 2 years ago

Hey @jason-warner , the codesandbox demo seems to have stopped working. I wonder if it was due to some of your modifications on the webpack config? Any clue? https://codesandbox.io/s/m34yq5q0qx

alvarotrigo commented 2 years ago

now I see the file /dist/react-fullpage-umd.js gets removed�and it won't be generated anymore.

This issue was resolved on this pull request by adding { cleanStaleWebpackAssets: false } on the CleanWebpackPlugin.

However, the issue with the codesandbox still exists. The component is basically unusable at the moment.