Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Mar 31 13:31
    joostdecock synchronize #96
  • Mar 31 13:31

    joostdecock on translation

    New translations en.md (Dutch) (compare)

  • Mar 31 13:31
    joostdecock synchronize #96
  • Mar 31 13:31

    joostdecock on translation

    New translations en.md (Dutch) (compare)

  • Mar 31 12:49
    joostdecock synchronize #96
  • Mar 31 12:49

    joostdecock on translation

    New translations en.md (Dutch) (compare)

  • Mar 31 07:05
    joostdecock closed #345
  • Mar 31 07:05
    joostdecock commented #345
  • Mar 31 07:01
    joostdecock commented on 91d75a5
  • Mar 31 07:00
    joostdecock commented #345
  • Mar 31 07:00
    joostdecock closed #344
  • Mar 31 06:59

    joostdecock on master

    fix: Broken link on homepage (compare)

  • Mar 31 05:10

    dependabot-preview[bot] on npm_and_yarn

    (compare)

  • Mar 31 05:10
    dependabot-preview[bot] closed #340
  • Mar 31 05:10
    dependabot-preview[bot] commented #340
  • Mar 31 05:10
    dependabot-preview[bot] labeled #347
  • Mar 31 05:10
    dependabot-preview[bot] opened #347
  • Mar 31 05:10

    dependabot-preview[bot] on npm_and_yarn

    chore(deps): Bump gatsby from 2… (compare)

  • Mar 31 04:53

    dependabot-preview[bot] on npm_and_yarn

    (compare)

  • Mar 31 04:53
    dependabot-preview[bot] closed #339
Joost De Cock
@joostdecock
I've also reconfigured crowdin a bit so that we only translate the files for freesewing.org
saurabhank
@saurabhank

Hi! I was trying to run a builtin package(aaron). The "yarn install" command ran successfully in the example folder but on running "yarn start" in the same gives error.

yarn run v1.22.4
$ react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"babel-eslint": "10.0.3"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:

/media/saurabh/9E007F28007F0695/freesewing/freesewing/packages/aaron/node_modules/babel-eslint (version: 10.0.1)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if /media/saurabh/9E007F28007F0695/freesewing/freesewing/packages/aaron/node_modules/babel-eslint is outside your project directory.*

  • For example, you might have accidentally installed something in your home folder.*

    7. Try running npm ls babel-eslint in your project folder.

    • This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.*

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

PS: There was no such problem in running "yarn install" and "yarn start" command in the parent folder i.e packages/aaron but I got error in packages/aaron/example
Joost De Cock
@joostdecock
@saurabhank This is friction between our monorepo and create-react-app who both use babel-eslint.
The best thing to do is add a .env file in the example directory that contains SKIP_PREFLIGHT_CHECK=true
I should add that by default so people don't see this warning
Joost De Cock
@joostdecock

I'm copying a DM here because I prefer to answer questions here so others can benefit from the answers:

I created a new project with npm init freesewing-pattern
I modified it and I published it to npm.
Then i created a new react app in another folder : npx create-react-app test-npm-install
And I installed my package : npm i ...

I edited src/app.js as such:

import React from 'react'
import MyComponent from '[redacted]'

function App() {
    return (
      <MyComponent />
    )
}

export default App;

But when I run npm start I get this error in the browser : TypeError: this is undefined Pattern and the call stack.
could you kick start me ? Newbie request, sorry, but I've already spent some time to understand these new technos, I prefer to go fast by asking those who know.

So this question really is about how do I integrated my pattern in my frontend, or to but it bluntly, how do I show my pattern in the browser.
That is admittedly not something we explain in great detail in our documentation. But it's not the end of the world to understand either.
I'm not going to do into all of the quirks of the Javascript ecosystem and how some things work in the browser and others not. Since you're using create-react-app (CRA) you don't have to worry about that, everything will be transpiled for you.
So you're importing your pattern, and then returning it as a React component. You're missing a few steps there I'm afraid.
Joost De Cock
@joostdecock
Here is what you need:
  • The FreeSewing core library
  • Your pattern
  • A React component that can display your pattern
First up: Our core library. Your pattern does not work on its own without the @freesewing/core package.
We do not bundle this with the pattern, because if we did that, that would mean that every pattern had its own copy of the core library embedded, which would be very inefficient if you've got a bunch of patterns on the site (like we do).
It is a so-called peer dependency so you will have to install it: npm i --save @freesewing/core
(I am talking about your create-react-app thing here, not your pattern)
Then, you can start thinking about displaying the pattern.
Joost De Cock
@joostdecock
What you should know is that your pattern is a constructor. You can't use it as-is, but need to instantiate it. Something like this:
import MyPattern from ....

const pattern = new MyPattern(settings, plugins)
You need to pass settings and the plugins you want to use.
Here's a more realistic example:
import Aaron from '@freesewing/aaron' // this is the pattern
import theme from '@freesewing/plugin-theme'

let settings = {
  measurements: {
    chestCircumference: 1090,
    // and so on
}

const pattern = new Aaron(settings, theme)
Now you have an instantiated pattern. You can draft it and render it to SVG as such:
let svg = pattern.draft().render()
Joost De Cock
@joostdecock
That is certainly one way to go, but given that you're using React, you might want to render to a React component instead.
Fortunately, you already did the work for you. Behold:
import React from 'react'
import Aaron from '@freesewing/aaron' // this is the pattern
import theme from '@freesewing/plugin-theme'
import Draft from '@freesewing/components/Draft' // This is our React component to show patterns

const MySuperComponent = props => {

  let settings = {
    measurements: {
      chestCircumference: 1090,
      // and so on
  }

  const patternProps = new Aaron(settings, theme).draft().getRenderProps()

  return <Draft {...patternProps} />
}

export default MySuperComponent
This React component would render Aaron with a bunch of measurements (I didn't fill all in but you get the point).
Now obviously, if you wanted to extend that to allow different measurements and settings and so on, that adds complexity.
Before you know it, you'll be building a new freesewing.org :)
Just in case, here is the source code: https://github.com/freesewing/freesewing.org/
Last but not least: If you want to share your patterns with us, you don't have to worry about any of this. We'll gladly take care of the frontend integration for you.
If you want to host your own patterns, then yes, you'll need to do this yourself. But once again, you can look at our code for inspiration.
saurabhank
@saurabhank

I was able to get the existing pattern on the browser from the example provided on the site. However that was not full code but connecting some dots and some facts you told that "import Pattern from pattern" imports the pattern from parent directory as referenced from package.json i.e "pattern": "file:..".

import React from 'react'
import freesewing from '@freesewing/core'
import Workbench from '@freesewing/components/Workbench'
import 'typeface-roboto-condensed'
import '@freesewing/css-theme'

// import Pattern from 'pattern'

import brian from "@freesewing/brian";

const App = props => {
//let instance = new Pattern()
let instance = new brian({
sa: 10
});
let config = instance.config

return (
<Workbench freesewing={freesewing} Pattern={brian} config={config} userLanguage="en" />
)
}

export default App

Entering this in example/App.js I was able to get a pattern on freeswing UI. This was the simplest thing I could do to get existing pattern on UI.

saurabhank
@saurabhank
Indeed this is an inspirational project.
certainly I won't be making a new freesewing, instead I will be extending its features and like to add few more packages as per my need that's why I was trying out different things and trying to understand it from the source code of packages so that I can do the same thing to integrate a new package.
Joost De Cock
@joostdecock
@saurabhank just to avoid confusion: the answer I gave above was to somebody else who DMd me a question.
But the two of you are working on similar things :)
Rufus31415
@Rufus31415
Hi Joost, thank you very much for your quick answer :) it works!
Joost De Cock
@joostdecock
:thumbsup:
saurabhank
@saurabhank
Hi Joost! I want to understand the process of generating build from the monorepo so that I can get dist folders. I have tried -
a) npm install followed by npm run release.
b) yarn install followed by npm run release.
but none of the above works.
Joost De Cock
@joostdecock
We use Lerna to manage the monorepo: https://lerna.js.org/
The first thing you should do after cloning the repo is run lerna bootstrap which will install dependencies and link them together.
After that, you can run things in their own repos, just keep in mind we use yarn. So yarn build and not npm run build
You can run yarn release in the root to trigger a new release. Or lerna run build to run yarn build for every package
You can also have lerna run a command in every package dir, for example lerna exec -- npm publish will just run the publish step
There's also yarn reconfigure which you can run in the root folder. This is a freesewing-specific script that will generate the package.json, rollup.config.js, README.md, and CHANGELOG.md for every package.
Check the config folder for the data used by the reconfigure script.
saurabhank
@saurabhank
I ran "lerna bootstrap" and then "yarn release". This did not work because it was looking for some utils libraries in reconfigure.js file.
So I ran "yarn build" command in packages/utils. Afterwards I executed "yarn release" on the root folder. It proceeded a bit but failed on building pattern-info package in middle.
Screenshot from 2020-03-31 21-55-43.png
Screenshot from 2020-03-31 22-09-50.png
saurabhank
@saurabhank
On debugging I found that there were some folders that are missing in the pattern-info package that should be generated by reconfigure.js. As per the config/scripts.yaml was configured to execute prebuild.js for pattern-info package which was supposed to make all those directories.
Joost De Cock
@joostdecock
The prebuild in pattern-info requires the pattern packages to be built
saurabhank
@saurabhank
Exactly
Joost De Cock
@joostdecock
Try lerna exec --no-bail -- yarn build in the root folder
Then in pattern-info, run yarn prebuild
Then, in the root folder, run yarn reconfigure
From then onwards, yarn reconfigure should just work
Sorry, I should make that more straightforward
saurabhank
@saurabhank
actually "yarn reconfigure" isn't breaking
"yarn release" is breaking
because it tries to build all packages
I guess in you answer "yarn prebuild" should be "yarn prepare"
Because there is no "prebuild" tag inside script object
in the package.json of pattern-info package
saurabhank
@saurabhank
I followed the steps but "yarn prepare" is breaking
This is due to in the node modules there are no dist folders made i.e these packages are not build.