sku 11.7.0 → 11.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/.github/workflows/release.yml +1 -1
  2. package/CHANGELOG.md +12 -0
  3. package/config/babel/babelConfig.js +0 -1
  4. package/config/jest/jestConfig.js +6 -2
  5. package/docs/docs/multi-language.md +53 -5
  6. package/docs/docs/multi-site.md +1 -1
  7. package/docs/docs/testing.md +2 -6
  8. package/docs/index.html +12 -8
  9. package/package.json +10 -10
package/.github/workflows/release.yml CHANGED
@@ -29,7 +29,7 @@ jobs:
29
29
  run: yarn --frozen-lockfile
30
30
 
31
31
  - name: Create Release Pull Request or Publish to npm
32
- uses: changesets/action@c2918239208f2162b9d27a87f491375c51592434
32
+ uses: changesets/action@v1
33
33
  with:
34
34
  publish: yarn release
35
35
  env:
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # sku
2
2
 
3
+ ## 11.7.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Fix a bug that broke root resolution within `.css.ts` files during tests ([#741](https://github.com/seek-oss/sku/pull/741))
8
+
9
+ ## 11.7.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Update dependencies ([#724](https://github.com/seek-oss/sku/pull/724))
14
+
3
15
  ## 11.7.0
4
16
 
5
17
  ### Minor Changes
package/config/babel/babelConfig.js CHANGED
@@ -24,7 +24,6 @@ module.exports = ({
24
24
  require.resolve('babel-plugin-macros'),
25
25
  require.resolve('@loadable/babel-plugin'),
26
26
  [require.resolve('babel-plugin-treat'), { alias: 'sku/treat' }],
27
- require.resolve('@vanilla-extract/babel-plugin'),
28
27
  require.resolve('@babel/plugin-transform-runtime'),
29
28
  ];
30
29
 
package/config/jest/jestConfig.js CHANGED
@@ -1,14 +1,17 @@
1
1
  const escapeRegex = require('escape-string-regexp');
2
- const { paths } = require('../../context');
2
+ const { cwd } = require('../../lib/cwd');
3
+ const { paths, rootResolution } = require('../../context');
3
4
  const slash = '[/\\\\]'; // Cross-platform path delimiter regex
4
5
  const compilePackagesRegex = paths.compilePackages
5
6
  .map((pkg) => `.*${escapeRegex(pkg)}`)
6
7
  .join('|');
7
8
 
9
+ /** @type {import('jest').Config} */
8
10
  module.exports = {
9
11
  testEnvironment: 'jsdom',
10
12
  setupFilesAfterEnv: paths.setupTests,
11
13
  prettierPath: require.resolve('prettier'),
14
+ modulePaths: rootResolution ? [cwd()] : undefined,
12
15
  testMatch: [
13
16
  // Default values, but with 'ts' + 'tsx' support
14
17
  // (https://jestjs.io/docs/en/configuration.html#testmatch-array-string)
@@ -33,7 +36,8 @@ module.exports = {
33
36
  },
34
37
  transform: {
35
38
  '\\.less$': require.resolve('./cssModulesTransform.js'),
36
- '\\.(ts|tsx)$': require.resolve('./tsBabelTransform.js'),
39
+ '\\.css\\.ts$': require.resolve('@vanilla-extract/jest-transform'),
40
+ '\\.tsx?$': require.resolve('./tsBabelTransform.js'),
37
41
  '\\.js$': require.resolve('./jsBabelTransform.js'),
38
42
  },
39
43
  transformIgnorePatterns: [
package/docs/docs/multi-language.md CHANGED
@@ -4,7 +4,9 @@
4
4
 
5
5
  If your application supports multiple languages you can designate those languages with the `languages` configuration.
6
6
 
7
- Languages can be either a string, e.g. `en` or an object that designates a parent language. E.g `{name: "en-AU", extends: "en"}`
7
+ Languages can be either a string, e.g. `en` or an object that designates a parent language.
8
+
9
+ **E.g.** `{name: "en-AU", extends: "en"}`
8
10
 
9
11
  **Note:** sku assumes that the development language is `en`. This will be used as the base language for all development, including your initial translations.
10
12
 
@@ -12,9 +14,9 @@ Languages can be either a string, e.g. `en` or an object that designates a paren
12
14
 
13
15
  To opt-in to multi-language builds you need to perform three steps:
14
16
 
15
- 1. Install "`@vocab/react`" as a dependency.
17
+ 1. Install `@vocab/react` as a dependency.
16
18
  This will be used by your code to support dynamically loading the correct language translations inside React components
17
- 2. Add the list of supported "`languages`" to your [sku configuration](./docs/configuration.md#languages)
19
+ 2. Add the list of supported `languages` to your [sku configuration](./docs/configuration.md#languages)
18
20
 
19
21
  ```json
20
22
  {
@@ -30,7 +32,7 @@ To create your first translation you need to create a folder ending in `.vocab`
30
32
 
31
33
  **E.g.** `./App.vocab/translations.json`
32
34
 
33
- In the file, add translations in the form of `translationKey: { message: "The english translation" }`
35
+ In the file, add translations in the form of `translationKey: { message: "The english translation" }`.
34
36
 
35
37
  **Recommendation:** Whilst you can use any key that you like we recommended to use a copy, or simplied version of the english translation.
36
38
 
@@ -48,7 +50,7 @@ import { useTranslations } from '@vocab/react';
48
50
 
49
51
  export function MyComponent() {
50
52
  const { t } = useTranslations(translations);
51
- return <div>t('my key')</div>;
53
+ return <div>{t('my key')}</div>;
52
54
  }
53
55
  ```
54
56
 
@@ -127,6 +129,52 @@ When formatting ICU messages vocab will format values such dates and numbers acc
127
129
  </VocabProvider>
128
130
  ```
129
131
 
132
+ ## Translation Platforms
133
+
134
+ sku supports specific features from 3rd-party translation platforms.
135
+ Currently the only translations platform supported by sku is [Phrase](https://phrase.com/).
136
+
137
+ ## Phrase-specific Features
138
+
139
+ ### Translation Syncing
140
+
141
+ sku can be used to synchronize your translations to and from Phrase.
142
+
143
+ Phrase syncing requires two environment variables to be set: `PHRASE_PROJECT_ID` and `PHRASE_API_TOKEN`.
144
+
145
+ `PHRASE_PROJECT_ID` must be set to your projects ID which can be found in your project's settings under the "API" section.
146
+
147
+ `PHRASE_API_TOKEN` must be set to an access token which can be created on the profile settings page.
148
+
149
+ To push translations to Phrase:
150
+
151
+ ```bash
152
+ $ sku translations push
153
+ ```
154
+
155
+ To pull translations from Phrase:
156
+
157
+ ```bash
158
+ $ sku translations pull
159
+ ```
160
+
161
+ ### Delete Unused Keys
162
+
163
+ When uploading translations, Phrase identifies keys that exist in the Phrase project, but were not referenced in the upload.
164
+ These keys can be deleted from Phrase by providing the `--delete-unused-keys` flag to `sku translations push`. E.g.
165
+
166
+ ```bash
167
+ $ sku translations push --delete-unused-keys
168
+ ```
169
+
170
+ ### Tags
171
+
172
+ The Phrase platform allows you to attach tags to translation keys.
173
+
174
+ sku will push any tags present in your `translations.json` file to phrase when the `sku translations push` command is used.
175
+
176
+ See the [Vocab documentation](https://github.com/seek-oss/vocab#Tags) for how to add tags to your translations.
177
+
130
178
  ## Pseudo-localization
131
179
 
132
180
  Any app that configures `languages` will automatically have the `en-PSEUDO` language generated for them.
package/docs/docs/multi-site.md CHANGED
@@ -23,7 +23,7 @@ Switching site by host requires that the hosts are configured on your system to
23
23
 
24
24
  First add the following script to your `package.json`.
25
25
 
26
- ```JSON
26
+ ```json
27
27
  {
28
28
  "setup-hosts": "sku setup-hosts"
29
29
  }
package/docs/docs/testing.md CHANGED
@@ -22,12 +22,8 @@ module.exports = {
22
22
  };
23
23
  ```
24
24
 
25
- For example, if you're using [Enzyme](https://airbnb.io/enzyme/), your `setupTests` script would look like this:
25
+ For example, if you're using [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and wish to use the custom jest matchers provided by [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom), your `setupTests` script would look like this:
26
26
 
27
27
  ```js
28
- import 'jest-enzyme';
29
- import { configure } from 'enzyme';
30
- import Adapter from 'enzyme-adapter-react-16';
31
-
32
- configure({ adapter: new Adapter() });
28
+ import '@testing-library/jest-dom';
33
29
  ```
package/docs/index.html CHANGED
@@ -45,10 +45,10 @@
45
45
  --sidebar-nav-strong-text-transform: none;
46
46
  --sidebar-nav-link-font-weight--active: 600;
47
47
  --sidebar-nav-pagelink-padding: 6px 8px;
48
- --sidebar-nav-pagelink-background-image: none;
49
- --sidebar-nav-pagelink-background-image--active: none;
50
- --sidebar-nav-pagelink-background-image--collapse: none;
51
- --sidebar-nav-pagelink-background-image--loaded: none;
48
+ --sidebar-nav-pagelink-background: none;
49
+ --sidebar-nav-pagelink-background--active: none;
50
+ --sidebar-nav-pagelink-background--collapse: none;
51
+ --sidebar-nav-pagelink-background--loaded: none;
52
52
  --sidebar-toggle-offset-top: 32px;
53
53
 
54
54
  --code-theme-selector: #ce0095;
@@ -99,14 +99,18 @@
99
99
  coverpage: true,
100
100
  onlyCover: true,
101
101
  auto2top: true,
102
- logo: '/logo/logo.png'
102
+ logo: '/logo/logo.png',
103
103
  };
104
104
  </script>
105
105
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
106
- <script src="https://unpkg.com/docsify-themeable"></script>
106
+ <script src="https://unpkg.com/docsify-themeable@0.9.0/dist/js/docsify-themeable.min.js"></script>
107
107
  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
108
108
  <script src="//unpkg.com/prismjs/components/prism-diff.min.js"></script>
109
- <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-typescript.min.js"></script>
110
- <script src="//cdn.jsdelivr.net/npm/prismjs@1.25.0/components/prism-bash.min.js"></script>
109
+ <script src="//cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-json.min.js"></script>
110
+ <script src="//cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
111
+ <script src="//cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-typescript.min.js"></script>
112
+ <script src="//cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-jsx.min.js"></script>
113
+ <script src="//cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-tsx.min.js"></script>
114
+ <script src="//cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js"></script>
111
115
  </body>
112
116
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sku",
3
- "version": "11.7.0",
3
+ "version": "11.7.2",
4
4
  "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
5
5
  "main": "index.js",
6
6
  "bin": {
@@ -68,14 +68,14 @@
68
68
  "@loadable/component": "^5.14.1",
69
69
  "@loadable/server": "^5.14.0",
70
70
  "@loadable/webpack-plugin": "^5.14.0",
71
- "@pmmmwh/react-refresh-webpack-plugin": "0.5.8",
71
+ "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
72
72
  "@storybook/builder-webpack5": "^6.5.12",
73
73
  "@storybook/manager-webpack5": "^6.5.12",
74
74
  "@storybook/react": "^6.5.12",
75
75
  "@types/jest": "^29.0.0",
76
76
  "@types/loadable__component": "^5.13.1",
77
- "@vanilla-extract/babel-plugin": "^1.0.0",
78
- "@vanilla-extract/webpack-plugin": "^2.0.0",
77
+ "@vanilla-extract/jest-transform": "^1.1.0",
78
+ "@vanilla-extract/webpack-plugin": "^2.2.0",
79
79
  "@vocab/core": "^1.1.0",
80
80
  "@vocab/phrase": "^1.1.0",
81
81
  "@vocab/pseudo-localize": "^1.0.0",
@@ -107,7 +107,7 @@
107
107
  "empty-dir": "^3.0.0",
108
108
  "ensure-gitignore": "^1.1.2",
109
109
  "env-ci": "^7.0.0",
110
- "esbuild": "^0.15.10",
110
+ "esbuild": "^0.17.0",
111
111
  "esbuild-register": "^3.3.3",
112
112
  "escape-string-regexp": "^4.0.0",
113
113
  "eslint": "^7.18.0",
@@ -162,7 +162,7 @@
162
162
  "webpack-merge": "^5.8.0",
163
163
  "webpack-node-externals": "^3.0.0",
164
164
  "wrap-ansi": "^7.0.0",
165
- "x-default-browser": "^0.4.0"
165
+ "x-default-browser": "^0.5.0"
166
166
  },
167
167
  "devDependencies": {
168
168
  "@changesets/cli": "^2.13.0",
@@ -185,7 +185,7 @@
185
185
  "git-diff": "^2.0.6",
186
186
  "html-webpack-plugin": "^5.3.2",
187
187
  "husky": "^4.3.8",
188
- "jest-puppeteer": "^6.1.1",
188
+ "jest-puppeteer": "^7.0.0",
189
189
  "jsonc-parser": "^3.0.0",
190
190
  "node-dir": "^0.1.17",
191
191
  "node-fetch": "^2.6.1",
@@ -197,11 +197,11 @@
197
197
  "renovate-config-seek": "^0.4.0",
198
198
  "seek-style-guide": "^42.0.0",
199
199
  "wait-on": "^5.2.1",
200
- "webpack-cli": "^4.7.2",
200
+ "webpack-cli": "^5.0.0",
201
201
  "webpack-stats-plugin": "^1.0.3"
202
202
  },
203
203
  "volta": {
204
- "node": "14.20.1",
205
- "yarn": "1.22.4"
204
+ "node": "16.19.0",
205
+ "yarn": "1.22.19"
206
206
  }
207
207
  }