Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] BREAKING CHANGE: full ESM support #2472

Draft
wants to merge 18 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 0 additions & 70 deletions .babelrc.js

This file was deleted.

36 changes: 36 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
module.exports = {
parser: '@typescript-eslint/parser',
plugins: ['standard', 'promise'],
env: {
node: true,
},
globals: {
__VERSION__: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:vitest-globals/recommended',
],
ignorePatterns: ['**/test/output-integration/**', '**/webpack.config.js'],
rules: {
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/no-namespace': 'off',
'@typescript-eslint/no-this-alias': [
'error',
{
allowDestructuring: true, // Allow `const { props, state } = this`; false by default
allowedNames: ['self'], // Allow `const self = this`; `[]` by default
},
],
'@typescript-eslint/no-empty-object-type': 'warn',
'@typescript-eslint/no-unsafe-function-type': 'warn',
'@typescript-eslint/no-unused-expressions': 'warn',
'@typescript-eslint/no-unused-vars': 'warn',
},
}
50 changes: 0 additions & 50 deletions .eslintrc.js

This file was deleted.

1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
dist
gh-pages
webpack-build-log.json

# Esdoc dirs
out
Expand Down
119 changes: 72 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,29 +43,44 @@

<!-- TOC -->

- [Features](#features)
- [Supported Environments](#supported-environments)
- [Getting Started](#getting-started)
- [Getting started](#getting-started)
- [Installation](#installation)
- [Node](#node-)
- [Browser](#browser-)
- [Typings](#typings)
- [Node:](#node)
- [Using in Legacy Environments Without ESM/Import Support](#using-in-legacy-environments-without-esmimport-support)
- [Browser:](#browser)
- [Typings](#typings)
- [Authentication](#authentication)
- [Using ES6 import](#using-es6-import)
- [Your first Request](#your-first-request)
- [Alternative plain API](#alternative-plain-api)
- [App Framework](#app-framework)
- [Troubleshooting](#troubleshooting)
- [Documentation/References](#documentationreferences)
- [Your first request](#your-first-request)
- [Legacy Client Interface](#legacy-client-interface)
- [App Framework](#app-framework)
- [Troubleshooting](#troubleshooting)
- [Documentation/References](#documentationreferences)
- [Configuration](#configuration)
- [Reference Documentation](#reference-documentation)
- [Contentful Javascript resources](#contentful-javascript-resources)
- [REST API reference](#rest-api-reference)
- [Versioning](#versioning)
- [Reach out to us](#reach-out-to-us)
- [Get involved](#get-involved)
- [License](#license)
- [Code of Conduct](#code-of-conduct)
- [accessToken (required, when `apiAdapter` is not set)](#accesstoken-required-when-apiadapter-is-not-set)
- [host (default: `'api.contentful.com'`)](#host-default-apicontentfulcom)
- [hostUpload (default: `'upload.contentful.com'`)](#hostupload-default-uploadcontentfulcom)
- [basePath (default: \`\`)](#basepath-default-)
- [httpAgent (default: `undefined`)](#httpagent-default-undefined)
- [httpsAgent (default: `undefined`)](#httpsagent-default-undefined)
- [headers (default: `{}`)](#headers-default-)
- [proxy (default: `undefined`)](#proxy-default-undefined)
- [retryOnError (default: `true`)](#retryonerror-default-true)
- [logHandler (default: `function (level, data) {}`)](#loghandler-default-function-level-data-)
- [requestLogger (default: `function (config) {}`)](#requestlogger-default-function-config-)
- [responseLogger (default: `function (response) {}`)](#responselogger-default-function-response-)
- [apiAdapter (default: `new RestAdapter(configuration)`)](#apiadapter-default-new-restadapterconfiguration)
- [throttle (default: `0`)](#throttle-default-0)
- [Reference documentation](#reference-documentation)
- [Contentful JavaScript resources](#contentful-javascript-resources)
- [REST API reference](#rest-api-reference)
- [Versioning](#versioning)
- [Reach out to us](#reach-out-to-us)
- [You have questions about how to use this library?](#you-have-questions-about-how-to-use-this-library)
- [You found a bug or want to propose a feature?](#you-found-a-bug-or-want-to-propose-a-feature)
- [You need to share confidential information or have other questions?](#you-need-to-share-confidential-information-or-have-other-questions)
- [Get involved](#get-involved)
- [License](#license)
- [Code of Conduct](#code-of-conduct)

<!-- /TOC -->
</details>
Expand All @@ -85,16 +100,24 @@ Browsers and Node.js:
- Edge
- Safari
- node.js (LTS)
- React Native (Metro bundler)

> For the minimum supported browser versions, refer to the [package.json of this library.](https://github.com/contentful/contentful-management.js/blob/master/package.json#L12)

To ensure compatibility across various JavaScript environments, this library is built as an ECMAScript Module (ESM) by default, using the `"type": "module"` declaration in `package.json`.

We also offer a bundle for the legacy CommonJS (CJS) require syntax, allowing usage in environments that do not support ESM.

Other browsers should also work, but at the moment we're only running automated tests on the browsers and Node.js versions specified above.
Additionally, there is a bundle available for direct usage within browsers.

For more details on the different variants of this library, see [Installation](#installation).

# Getting started

To get started with the Contentful Management JS library you'll need to install it, and then get credentials which will allow you to access your content in Contentful.

- [Installation](#installation)
- [Authentication](#authentication)
- [Using ES6 import](#using-es6-import)
- [Your first request](#your-first-request)
- [Troubleshooting](#troubleshooting)
- [Documentation/References](#documentationreferences)
Expand All @@ -115,6 +138,26 @@ Using [yarn](https://yarnpkg.com/lang/en/):
yarn add contentful-management
```

In a modern environment, you can import this library using:

```js
import * as contentful from 'contentful-management'
```

#### Using in Legacy Environments Without ESM/Import Support

Typically, your system will default to our CommonJS export when you use the require syntax:

```js
const contentful = require('contentful-management')
```

If this does not work, you can directly require the CJS-compatible code:

```js
const contentful = require('contentful-management/dist/contentful-management.cjs')
```

### Browser:

For browsers, we recommend to download the library via npm or yarn to ensure 100% availability.
Expand All @@ -127,7 +170,7 @@ If you'd like to use a standalone built file you can use the following script ta

**It's not recommended to use the above URL for production.**

Using `contentful@latest` will always get you the latest version, but you can also specify a specific version number:
Using `contentful-management@latest` will always get you the latest version, but you can also specify a specific version number:

```html
<!-- Avoid using the following url for production. You can not rely on its availability. -->
Expand All @@ -150,29 +193,13 @@ If you want to use this library for a simple tool or a local app that you won't

If you'd like to create an app which would make use of this library but that would be available for other users, where they could authenticate with their own Contentful credentials, make sure to also check out the section about [Creating an OAuth Application](https://www.contentful.com/developers/docs/references/authentication/#creating-an-oauth-20-application)

## Using ES6 import

You can use the es6 import with the library as follows

```js
// import createClient directly
import contentful from 'contentful-management'
const client = contentful.createClient(
{
// This is the access token for this space. Normally you get the token in the Contentful web app
accessToken: 'YOUR_ACCESS_TOKEN',
},
{ type: 'plain' }
)
//....
```

## Your first request

Beginning with `contentful-management@7` this library provides a client which exposes all CMA endpoints in a simple flat API surface, as opposed to the waterfall structure exposed by legacy versions of the SDK.

```javascript
const contentful = require('contentful-management')
import * as contentful from 'contentful-management'

const plainClient = contentful.createClient(
{
accessToken: 'YOUR_ACCESS_TOKEN',
Expand Down Expand Up @@ -232,7 +259,8 @@ The benefits of using the "plain" version of the client, over the legacy version
The following code snippet is an example of the legacy client interface, which reads and writes data as a sequence of nested requests:

```js
const contentful = require('contentful-management')
import * as contentful from 'contentful-management'

const client = contentful.createClient({
accessToken: 'YOUR_ACCESS_TOKEN',
})
Expand Down Expand Up @@ -267,8 +295,8 @@ grants your apps access to the supported space-environment scoped entities witho
need to expose a management token, and without coding any additional backend middleware.

```javascript
const contentfulApp = require('@contentful/app-sdk')
const contentful = require('contentful-management')
import contentfulApp from '@contentful/app-sdk'
import * as contentful from 'contentful-management'

contentfulApp.init((sdk) => {
const cma = contentful.createClient(
Expand All @@ -294,9 +322,6 @@ contentfulApp.init((sdk) => {

## Troubleshooting

- **I can't Install the package via npm** - Check your internet connection - It is called `contentful-management` and not `contenful-management` ¯\\\_(ツ)\_/¯
- **Can I use the library in react native projects** - Yes it is possible
- **I get the error: Unable to resolve module `http`** - Our library is supplied as node and browser version. Most non-node environments, like React Native, act like a browser. To force using of the browser version, you can require it via: `const { createClient } = require('contentful-management/dist/contentful-management.browser.min.js')`
- **I am not sure what payload to send when creating and entity (Asset/Entity/ContentType etc...)** - Check the Content Management API [docs](https://www.contentful.com/developers/docs/references/content-management-api/) or the examples in the reference [docs](https://contentful.github.io/contentful-management.js) - Feel free to open an issue if you didn't find what you need in the above links
- 😱 **something is wrong what should I do** - If it is a bug related to the code create a GitHub issue and make sure to remove any credential for your code before sharing it. - If you need to share your credentials, for example you have an issue with your space, please create a support ticket. - Please **do not** share your management token in a GitHub issue

Expand Down
2 changes: 1 addition & 1 deletion lib/adapters/REST/rest-adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { createHttpClient } from 'contentful-sdk-core'
import copy from 'fast-copy'
import type { OpPatch } from 'json-patch'
import type { Adapter, MakeRequestOptions, MakeRequestPayload } from '../../common-types'
import endpoints from './endpoints'
import endpoints from './endpoints/index'

export type RestAdapterParams = CreateHttpClientParams & {
/**
Expand Down
2 changes: 1 addition & 1 deletion lib/create-app-definition-api.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { MakeRequest, QueryOptions, SpaceQueryOptions } from './common-types'
import entities from './entities'
import entities from './entities/index'
import type { CreateAppBundleProps } from './entities/app-bundle'
import type { AppDefinitionProps } from './entities/app-definition'
import { wrapAppDefinition } from './entities/app-definition'
Expand Down
3 changes: 2 additions & 1 deletion lib/create-contentful-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import type {
GetEnvironmentTemplateParams,
BasicCursorPaginationOptions,
} from './common-types'
import entities from './entities'
import entities from './entities/index'
import type { Organization, OrganizationProps } from './entities/organization'
import type { CreatePersonalAccessTokenProps } from './entities/personal-access-token'
import type { Space, SpaceProps } from './entities/space'
Expand Down Expand Up @@ -43,6 +43,7 @@ export default function createClientApi(makeRequest: MakeRequest) {
entities.environmentTemplate

return {
version: __VERSION__,
/**
* Gets all environment templates for a given organization with the lasted version
* @param organizationId - Organization ID
Expand Down
2 changes: 1 addition & 1 deletion lib/create-entry-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { CreateCommentParams, CreateCommentProps } from './entities/comment
import type { Entry, EntryProps, EntryReferenceOptionsProps } from './entities/entry'
import type { CreateTaskProps } from './entities/task'
import * as checks from './plain/checks'
import entities from './entities'
import entities from './entities/index'

/**
* @private
Expand Down
Loading