makeswift

Patch Changes

• bb532b5: update preview mode proxy more flexibly determine protocol

Minor Changes

• e59fd1c: Release version 0.1.0 of the CLI

Patch Changes

• e59fd1c: Add --env flag

Patch Changes

• Updated dependencies [e777f28]
  • @makeswift/[email protected]

Patch Changes

• e777f28: Hotfix: next plugin errors when headers is null.

Patch Changes

• d946c97: Fix Google Chrome persistent connections issue

Patch Changes

• ce1bd01: Fix two bugs — the server not closing and at used on older Node versions

Patch Changes

• 5452780: Perform file integration operations in a staging environment
• f04722c: - fix error where next.config.js fails and CLI keeps going
  • make default value for integrating true
  • make init the default entrypoint to npx makeswift
  • support src/pages folder structures for integration
  • validate app name is a valid NPM package name
  • add a register-components.ts file upon integration

Patch Changes

• 79c2405: Upgrade @types/react and @types/react-dom.
• 317a825: Add API handler for font registration.

Patch Changes

• 19ae5ea: Use a better workflow for deciding on the project name
• 764e971: Support --use-npm & --use-pnpm parameters
• 3823c46: - Less noisy log output
  • Ask approval before integrating and existing Next step
  • Support MAKESWIFT_API_HOST env var
  • Check for conflicting files before integrating
  • Don't integrate if the next config already integrated
  • Upgrade create-next-app
• 9e613bc: Cleaner error messaging

Patch Changes

• 8e45e6b: Add support for preview mode

Patch Changes

• 51dc17b: Fix Preview Mode rewrite source so that it matches /.

Patch Changes

• Updated dependencies [51dc17b]
  • @makeswift/[email protected]

Patch Changes

• fca39c0: Fix TypeScript type declarations.

Minor Changes

• a6c9a51: BREAKING: Add support for on-demand revalidation. This is a breaking change because
  @makeswift/runtime now requires Next.js v12.2.0 or higher for stable on-demand revalidation
  support.

  If you're not using Next.js v12.2.0 or greater we will attempt to use res.unstable_revalidate. If
  that's not available, then we'll log a warning and revalidation will be a no-op. Make sure to add a
  revalidation period to getStaticProps if that's the case so that changes to Makeswift pages are
  eventually reflected on your live pages.

• a033573: BREAKING: Reworks how the Makeswift builder displays your site by leveraging Next.js' Preview Mode!

  This is a huge change and makes integrating Makeswift into your Next.js app a lot simpler. We've
  deprecated the getStaticPaths, getStaticProps, and getServerSideProps exports from
  @makeswift/runtime/next and will be removing them in the next minor release. We recommend you
  follow the migration steps below.

  Here's how to migrate:

  • Create a new file at pages/api/makeswift/[...makeswift].js with the following contents:

    import { MakeswiftApiHandler } from '@makeswift/runtime/next'
    
    export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY)
    

  • Update your dynamic optional catch-all route to use the new data fetching APIs,
    Makeswift.getPages and Makeswift.getPage. Note that we don't use revalidate since the API
    handler adds automatic support for on-demand revalidation.

    import './path/to/makeswift/register-components'
    
    -export { getStaticPaths, getStaticProps, Page as default }
    +import { Makeswift, Page as MakeswiftPage } from '@makeswift/runtime/next'
    +
    +export async function getStaticPaths() {
    +  const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY)
    +  const pages = await makeswift.getPages()
    +
    +  return {
    +    paths: pages.map((page) => ({
    +      params: {
    +        path: page.path.split('/').filter((segment) => segment !== ''),
    +      },
    +    })),
    +    fallback: 'blocking',
    +  }
    +}
    +
    +export async function getStaticProps(ctx) {
    +  const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY)
    +  const path = '/' + (ctx.params?.path ?? []).join('/')
    +  const snapshot = await makeswift.getPageSnapshot(path, {
    +    preview: ctx.preview,
    +  })
    +
    +  if (snapshot == null) return { notFound: true }
    +
    +  return { props: { snapshot } }
    +}
    +
    +export default function Page({ snapshot }) {
    +  return <MakeswiftPage snapshot={snapshot} />
    +}
    

  • Delete your Makeswift preview route. This page won't be used anymore. It's likely at
    pages/makeswift.js and the diff might look something like this:

    -import './path/to/makeswift/register-components'
    -
    -export { getServerSideProps, Page as default } from '@makeswift/runtime/next'
    

  • Go to your Makeswift site settings and update the host URL to be just your host's
    origin. For example, change https://www.makeswift.com/makeswift to just
    https://www.makeswift.com or http://localhost:3000/makeswift to just http://localhost:3000.

  If you have any questions about the migration or run into any issues, please don't hesitate to chat
  with us. We're on Discord!

  ---

  Now onto the changes...

  Introducing MakeswiftApiHandler, integration with Next.js Preview Mode, and new data fetching
  APIs!

  MakeswiftApiHandler and Next.js Preview Mode

  There's no need for a preview route anymore so you can delete your /makeswift page. We instead
  now use Next.js' Preview Mode when
  you're in the builder. Read more about the feature in the
  RFC.

  To migrate from the old preview route API, delete your preview route:

  -export { getServerSideProps, Page as default } from '@makeswift/runtime/next'
  

  Then create a new file at pages/api/makeswift/[...makeswift].ts with the following content:

  import { MakeswiftApiHandler } from '@makeswift/runtime/next'
  
  export default MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY)
  

  The API handler not only enables Next.js Preview Mode, allowing you to remove your preview route,
  but it also adds support for automatic on-demand revalidation! Whenever you publish a page, Makeswift will
  automatically send a request to /api/makeswift/revalidate and take care of on-demand ISR. This
  means that you can leave off the revalidate option in getStaticProps and trust your pages will
  always be up to date while leveraging ISR to it's fullest extent!

  New data fetching APIs

  There's a new API for fetching Makeswift data in your pages. No more magic behind the
  getStaticProps and getServerSideProps exports. You can now instantiate a Makeswift client
  using your site API key and see your data flow from the Makeswift API, though your Next.js app, to
  your pages. The new APIs are:

  • Makeswift.getPages to retrieve all Makeswift pages and use in getStaticPaths
  • Makeswift.getPageSnapshot to retrieve a page's layout data and render the Makeswift Page
    component

  Pages integrated with Makeswift should go from looking something like this:

  import './path/to/makeswift/register-components'
  
  export { getStaticPaths, getStaticProps, Page as default }
  

  To now looking something like this:

  import './path/to/makeswift/register-components'
  
  import { Makeswift, Page as MakeswiftPage } from '@makeswift/runtime/next'
  
  export async function getStaticPaths() {
    const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY)
    const pages = await makeswift.getPages()
  
    return {
      paths: pages.map((page) => ({
        params: {
          path: page.path.split('/').filter((segment) => segment !== ''),
        },
      })),
      fallback: 'blocking',
    }
  }
  
  export async function getStaticProps(ctx) {
    const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY)
    const path = '/' + (ctx.params?.path ?? []).join('/')
    const snapshot = await makeswift.getPageSnapshot(path, {
      preview: ctx.preview,
    })
  
    if (snapshot == null) return { notFound: true }
  
    return { props: { snapshot } }
  }
  
  export default function Page({ snapshot }) {
    return <MakeswiftPage snapshot={snapshot} />
  }
  

  While this is more lines of code, this more clearly shows what's happening in your Next.js page and
  gives you more flexiblity to add more data fetching logic to getStaticProps or
  getServerSideProps. We believe that this way of integrating will be a lot less confusing and give
  your more options as to how you want to manage things like the Makeswift API key, for example.

  We've deprecated the getStaticPaths, getStaticProps, and getServerSideProps exports and will
  be removing them in the next minor version.

Patch Changes

• Updated dependencies [a033573]
  • @makeswift/[email protected]

Patch Changes

• a033573: Add Preview Mode rewrites to @makeswift/next-plugin.

Patch Changes

• f22b832: Infer non-string TS types for Combobox control.
• 0025d7e: Add MakeswiftComponentType constant.

Patch Changes

• 882dc0b: Properly infer Slot control prop types.

Patch Changes

• fe9221a: Add Slot control.

  This is one of the most important controls in Makeswift as it allows you to compose React components
  together. It's powered by the same technology used in our most important component, the Box. This
  means you can now build your own Box-like components with the intuitive Makeswift layout experience.

  Here's how simple it is to build a custom Box that can have elements dropped into it:

  function MyBox({ children, className }) {
    return <div className={className}>{children}</div>
  }
  
  ReactRuntime.registerComponent(MyBox, {
    type: 'my-box'
    label: 'My Box',
    props: {
      children: Slot(),
      className: Style()
    }
  })
  

  There's a lot more you can do with the Slot. Here's some ideas:

  • Custom animations for elements passed via Slot
  • Passing data between components using React context and Slot (i.e., a component with Slot provides
    a context value and any component dropped inside it can read that context)

  Read more about the Slot control in our docs.

• Updated dependencies [e737cc7]

  • @makeswift/[email protected]

Patch Changes

• e737cc7: Set compiler.styledComponents to true in Makeswift Next.js plugin

Patch Changes

• 1617692: Fix: handle undefined style on getMarkSwatchIds
• 918098b: Fix: default width for Carousel, Countdown, and Video components