VSinerva/freesewing
1
0
Fork 0
Code Activity

chore: Updated tutorial for v3

Browse source
This commit is contained in:
joostdecock 2023-09-30 14:04:18 +02:00
parent b5e1554e4f
commit 3bc5fe28de
47 changed files with 2635 additions and 1526 deletions
Download patch file Download diff file Expand all files Collapse all files

121
markdown/dev/tutorials/pattern-design/part2/our-first-part/en.md
View file

@ -1,6 +1,6 @@
---
title: Creating a part
order: 120
order: 20
---
Much like garments themselves, patterns are made up of _parts_.
@ -16,34 +16,23 @@ this, but it's a good habit to get into.
## bib.mjs
Since I chose the `tutorial` preset, the development environment is preconfigured for this tutorial.
I am going to use the **From scratch** template. So the files I want to edit live
in `design/from-scratch`.
The design's main file lives in `design/src/index.mjs`, and the bib part lives in `design/src/bib.mjs`.
Our part lives in `design/from-scratch/src/bib.mjs`, and it currently looks like this:
This `bib.mjs` is where I will be doing most of the work.
The file that was created includes a lot of comments to provide guidance to those not using this tutorial.
I have removed those comments from the inline examples in this tutorial for clarity in our example.
The `bib.mjs` file currently looks like this:
```design/src/bib.mjs
/*
* This function drafts the part
*/
function draftBib ({ part }) => {
```src/bib.mjs
function draftBib({ part }) {
return part
}
/*
* This is the part object
*/
export const bib = {
name: 'tutorial.bib',
name: 'fromscratch.bib',
draft: draftBib,
}
```
### The part object
## The part object
Each part in FreeSewing is an object that describes the part, and has a `draft`
method to do the actual work of drafting the part.
@ -64,13 +53,13 @@ to create other designs.
</Note>
#### The part name
### The part name
```design/src/bib.mjs
name: 'tutorial.bib',
```src/bib.mjs
name: 'fromscratch.bib',
```
A part's `name` should be unique in a design. I used `tutorial.bib` as the
A part's `name` should be unique in a design. I used `fromscratch.bib` as the
name, because that makes sense.
<Warning>
@ -80,9 +69,9 @@ This avoids naming conflicts when mixing parts from various designs to create a
</Warning>
#### The part's draft method
### The part's draft method
```design/src/bib.mjs
```src/bib.mjs
draft: draftBib,
```
@ -97,86 +86,4 @@ This structure of putting the draft method at the top of the file and
the part object at the bottom is a bit of a convention in FreeSewing.
</Note>
## index.mjs
<Tip>
Feel free to skip to [Adding
measurements](/tutorials/pattern-design/adding-measurements) if you're itching
to get started. Or, read on for an explanation of what's going on in the
`index.mjs` file.
</Tip>
The `index.mjs` file is already complete and we won't be making any changes to
it. But if you are curious about what's going on inside `index.mjs`,
this is all we need:
```design/src/index.mjs
import { Design } from '@freesewing/core'
import { bib } from './bib.mjs'
import { i18n } from '../i18n/index.mjs'
const Tutorial = new Design({
parts: [ bib ],
})
export { bib, Tutorial, i18n }
```
If you are familiar with Javascript, I hope you are happy to see that FreeSewing uses ESM modules, and named exports.
If you are not familiar with Javascript, these `import` statements are how we load code from other files.
There's three of them:
```design/src/index.mjs
import { Design } from '@freesewing/core'
```
This loads the `Design` constructure from FreeSewing's core library.
A constructor is a function that creates something. So the `Design` constructor creates a Design.
```design/src/index.mjs
import { bib } from './bib.mjs'
```
This loads the `bib` part from the `bib.mjs` file in the same folder.
This is what we will be working on.
```design/src/index.mjs
import { i18n } from '../i18n/index.mjs'
```
And this loads something named `i18n` from the `index.mjs` file in the `i18n`
folder that's one level higher. These are the translations.
I will show you how you can provide translations for your designs towards the
end of this tutorial.
```design/src/index.mjs
const Tutorial = new Design({
parts: [ bib ],
})
```
This is where the magic happens. We create a new Design by passing the Design
constructure a configuration object. All it holds is the `parts` key that is
an array of our parts.
Which goes to show that a design isn't much more than a bunch of parts.
```design/src/index.mjs
export { bib, Tutorial, i18n }
```
And then all that's left to do is export things so that people can use them.
These are named exports. We are exporting three things:
- `Tutorial` is our complete design. Exporting it means people can use it.
- `bib` is our part. We are exporting it so people can re-use just this part.
- `i18n` are the translations. We are exporting it so people can load them when using our Tutorial.
<Related>
Refer to [the design reference documentation](/reference/api/design) for
all details about what you can pass to the Design constructor.
</Related>