Webflow to Gatsby - what do I do with webflow.js and jQuery?

[howardwkim]

I’m hoping to create a workflow where I can easily port Webflow code to Gatsby while minimizing recurring manual changes when using AppFairy.

The intermediary step was to get my site working using a create react app project. Using AppFairy, I’m able to get most of the website working with create react app.

When I run gatsby develop and gatsby build, the CSS styling seems to work, but everything is still off. I think it has to do with how some of the scripts are added via AppFairy, particularly webflow.js.

Before I get into the AppFairy questions - I’m reading that combing jQuery with React breaks a lot of patterns. Frankly, I don’t care so long as it works, but could this prevent me from porting Webflow to Gatsby?

Here is a snippet from the AppFairy generated IndexView.js for my project:

  componentDidMount() {
    const scripts = [
      fetch("https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js").then(body => body.text()),
      fetch("js/webflow.js").then(body => body.text()),
    ]
    scripts.concat(Promise.resolve()).reduce((loaded, loading) => {
      return loaded.then((script) => {
        new Function(`
          with (this) {
            eval(arguments[0])
          }
        `).call(window, script)

        return loading
      })
    })
  }

I moved const scripts into comonentDidMount because global is not exposed during the gatsby build process (but this does not cause problems during gatsby develop).

This is my understanding of the code - after the script has fully loaded, execute the script in the window context

• Is this akin to dependency injection? Like script injection, but for that specific react component?
• What happens to this script during react-scripts start and react-scripts build? I can’t find the <script> related to jquery or webflow.js. Is it “integrated” into the React component?
• Can I treat webflow.js like any other script i.e. can I create an npm package from that file and fetch it via unpkg?

Lastly, what is going on with the following from scripts.index.js:

  {
    type: 'code',
    body: '!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);',
  }

[nandorojo]

Bumping this. Is there a way to get Webflow into a gatsby project? @DAB0mB

[jbothma]

Could something like this help? https://www.npmjs.com/package/import-webflow-export

Sounds like we have similar ideas.