Creating a new design

The development environment has already setup various designs for us. Since I am using the From scratch template, the files I want to edit live in design/from-scratch.

The design’s main file is design/from-scratch/src/index.mjs, and our bib part will live in design/from-scratch/src/bib.mjs.

This bib.mjs file is where will be doing most of the work here in part 2 of this tutorial. But let’s start with the index.mjs file as an appetizer, because this is where a new FreeSewing design is brought to live. It looks like this:

import { Design } from '@freesewing/core'
import { i18n } from '../i18n/index.mjs'
import { bib } from './bib.mjs'

/*
 * Create the design
 */
const FromScratch = new Design({
  data: {
    name: 'fromScratch',
    version: '0.0.1',
  },
  parts: [ bib ],
})

export { bib, FromScratch, i18n }

Not too intimidating, is it?

Imports

At the top of the file, we have a bunch of imports:

import { Design } from '@freesewing/core'
import { i18n } from '../i18n/index.mjs'
import { bib } from './bib.mjs'

An import is how JavaScript loads code from a different file.
It essentially says: import something from somewhere:

As you can see, the somewhere can be different things. A local file like in lines 2 and 3, or a package published on NPM, in line 1.

It’s nothing for you to worry about too much at this point, but it does help us understand what’s going on at the bottom of our file.

Exports

The bottom holds a single export line:

export { bib, FromScratch, i18n }

When we export things from our code, we allow others to import those things for re-use in their code. That’s how it works.

These are named exports. We are exporting three things:

• bib is our part. We are exporting it so people can re-use just this part.
• FromScratch is our complete design. Exporting it means people can use it.
• i18n are the translations. We are exporting it so people can load them to use with their own translation solution.

If you are not familiar with this syntax, you’ll get the hang of it soon enough.

Design constructor

finally the most interesting part of this file is the middle part where we are creating a new design:

const FromScratch = new Design({
  data: {
    name: 'fromScratch',
    version: '0.0.1',
  },
  parts: [ bib ],
})

The Design that we imported on line 1 is a so-called constructor. A constructor is a function that can create things out of nothing. Or, to be more accurate, that you can use with the new keyword.

We are passing some info to a this Design function, but the data we are passing is optional. If we strip that away for a moment, and don’t bother assigning the result to a variable, we reveal the essence of what it takes to create a new FreeSewing design:

new Design({
  parts: [ bib ],
})

In several places in this documentation, I will mention that a design is not much more than a thin wrapper around parts. But I feel nothing drives that point home like seeing it in code like this.

To create a new design, we call the Design constructor and give it a list (an array) or parts.

That’s it. So let’s look at where the real action is next: Our first part.