fixes https://github.com/TryGhost/DevOps/issues/123
- ember-auto-import supports webpack v5 and v5 supports persistent file
caching
- this stores a cache of built files across warm boots, so Admin built
via `yarn dev` should be faster next time
- also ensures that recursive `node_modules` folders are emptied upon
`yarn fix`, as the webpack cache is stored in `node_modules` under
`ghost/admin`
- locally, this speeds up a warm build by 2x (!)
no issue
- The fingerprinting on chunk files was happening twice (once by ember
and once by webpack), resulting in the .js file and the .map file not
matching
- This change prevents ember from fingerprinting the chunk.*.map files,
so the resulting .map and .js files will have the same basename
- No real functional difference here, just a bit easier to find the
corresponding .map file for a given .js file
no issue
- Somewhere along the process of building the admin app, the sourcemaps
are getting corrupted
- This commit is to test the theory that babel is the source of the
corruption, because it isn't generating sourcemaps, so we are missing a
step in the process
no issue
- The sourcemaps currently generated by the admin build do not include
the `sourcesContent` key
- This commit is to experiment with this change, in particular to see if
it improves the stacktraces available in Sentry from errors in the admin
app
- Currently the stacktraces in admin show the minified code — hopefully
this change will make the stacktraces show the original source code to
make it easier to debug issues from within Sentry
- Might thoroughly break the sourcemaps, in which case I will revert this
no issue
- removed labs flag
- removed main editor component and all associated components
- switched usage of `<KoenigBasicHtmlInput>` and `<KoenigBasicHtmlTextarea>` over to use plain `textarea`, the only uses were in settings modals that have been replaced in AdminX
- cleaned up unused editor CSS
no issue
- we want to run e2e tests against production Ghost instances and having test selectors available means much less brittle tests
- only real impact from keeping the selectors is extra file size in production builds but that is minimal (~6KB gzipped at time of commit)
refs https://github.com/TryGhost/Toolbox/issues/403
- as we're moving towards independent Admin releases, we want to make
sure that we can bust cache when an asset is updated
- right now, svg, ttf and ico images aren't fingerprinted, so if they
change, it'll require a browser cache clear to update them
- instead, we should add them to the list of fingerprinted file
extensions to fix this issue
Refs 038600c350
- In the reference commit I update config so that svg titles are only removed in production. This causes them to show in tests which causes tests to fail. Config has now been updated to only include svg titles in development.
requires https://github.com/TryGhost/Ghost/pull/15128
refs https://github.com/TryGhost/Admin/pull/2252
- bumped `ember-auto-import` dependency
- updated `autoImport` config to match new format
- added dependencies for node packages that no longer have built-in polyfills in webpack@5
- updated `asset-delivery` to work with `ember-auto-import@2`
- reverted to standard ember `index.html` to let `ember-auto-import` handle it's insertion of multiple JS chunk files
- updated the `asset-delivery` addon to copy the the `index.html` and `/assets` to `core/built/admin/{development|production}/` directory rather than splitting the `index.html` file apart from the assets inside Ghost's directory structure
- switched to relative root URL in development/production
- required because assets are served from the same directory the index file is served from in Ghost rather than from the root
- Admin uses `/#/` URLs so it can be served from any subdirectory without requiring prior knowledge of that directory at build time
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
refs a4a4136c2f (commitcomment-79676720)
- `ember-auto-import` does the right thing automatically so manual `app.import` is not necessary and avoids potential pitfalls with multiple copies of react being bundled
- added the `window.*` global attachments after importing so that our async loaded UMD components have access to our bundled React and ReactDOM instances
no issue
- switched to using the `window.ReactDOM` instance that is created when importing the react/react-dom libraries
- React stores state/component references inside of the ReactDOM instance when rendering so we need to make sure all renders use the same instance otherwise it loses track of which component a hook belongs to
- cleaned up unnecessary vendor shims and `prop-types` import
- `react` and `react-dom` vendor shims are unused when using the globals instead of imports
- `prop-types` import+shim is not required as it's part of the `@tryghost/koenig-react` build unlike the earlier direct import of `react-mobiledoc-editor`
no issue
- dropped the bundled `react-mobiledoc-editor` package
- updated `<ReactMobiledocEditor>` component to pull in editor components dynamically
- added a resource function to dynamically import the external module
- added `Container` and `Editor` components that read from the resource function and wrap components of the same name from the external module
- added `<Suspense>` around the `Container` and `Editor` components so that React will show a loading state whilst the external components are still being fetched
- added `<ErrorHandler>` so we can show an error state if loading fails
no issue
- updated ember-cli-build and eslint config to support jsx
- added `react` and `react-dom` libraries
- included them in the build so the `React` and `ReactDom` globals are available for use by third party components
- added vendor shims so we can do things like `import * from 'react'` where the imports are referenced directly to the already imported modules
- added `<ReactComponent>` component
- designed to be extended from in specific react component classes
- renders a div and calls `renderComponent()` action once inserted - this should be replaced in any extended classes in order to render a react component
- handles react rendering and teardown
- added `<ReactMobiledocEditor>` react component that renders an editor composed of components provided by the `react-mobiledoc-editor` package
- added `<KoenigReactEditor>` ember component that renders `<ReactMobiledocEditor>` and handles pass-through of Ember arguments and handling of actions
- updated `<GhKoenigEditorReact>` to render `<KoenigReactEditor>` in place of `<KoenigEditor>`
refs https://github.com/TryGhost/Team/issues/1528
- used the already-loaded newsletters list to pass the slugs of active newsletters to the confirm modal, this allows use of the `{{members-count-fetcher}}` resource with the query `/members/?filter=newsletters:[...slugs]` to fetch a member and full count metadata
- added inclusion of `{{join}}` helper from `ember-composable-helpers` addon
refs https://github.com/TryGhost/Team/issues/1500
- `senderEmail` is now nullable with a fallback to `noreply@{site domain}`
- `senderName` is not nullable and has no fallback
- updated preview and input placeholder to match real-world behaviour
- inserted site title as the default value when creating a new newsletter to avoid friction with the sender name needing to be filled in when saving
- switched `senderReplyTo` input field to a select with "newsletter" and "support" options
- added basic `<Inputs::Select>` component as `<OneWaySelect>` had re-rendering issues causing loss of selected value when the label of the newsletter email changed to reflect a custom newsletter email value
refs https://github.com/TryGhost/Team/issues/1141
Showing canceled subscriptions provide a more complete picture of the activity of a member.
- Given there is no `member.product` object when a subscription is canceled, use the `member.subscriptions.price.product` objects instead of `member.products`.
- applied boy-scout rule for linter errors and and code formatting
- removed `multipleTiers` flag conditionals as it's now GA
- set up subscriptions as a separate mirage resource so they are easier to work with
- updated `PUT /members/:id/` endpoint to match real API's complimentary subscription behaviour
- modified mirage member serializer to match API output
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
refs https://github.com/TryGhost/Team/issues/559
We want to get rid of our existing modals implementation because it doesn't play well with Glimmer compoments and the animation library it uses is now unmaintained and blocking our Ember.js upgrades.
- installed addon using customised fork
- fork allows passthrough of `allowOutsideClick` to `focus-trap` so we can allow clicks on dropdowns and other wormholed content inside of a modal
- extended the `modals` service locally so we can customise click-outside-to-close behaviour and tie in with our `dropdowns` service
- set up styles in `modals-new.css`, mostly copied from `modals.css` with a few specific overrides
- once all modals are converted we can drop the old `modals.css` and rename `modals-new.css`
refs https://github.com/TryGhost/Team/issues/972
Applying a filter in the new members list updates URL and the filter dropdown contains the filters you've created. We want to keep the filters in filter dropdown on page refresh, which needs parsing nql filter from URL and re-building the filter list for the UI. This needs the `@nexes/nql-lang` package that parses the nql filters in JSON form.
Since `nql-lang` package had a dependency on `path`, `util` and `fs` node modules, this change needs a tweak in ember cli build using `ember-auto-import`, where we polyfill `path` and `util` package while using empty value for `fs` package.
no issue
- production sourcemaps are needed to have reasonably readable stack traces in error reporting
- will be excluded from Ghost release zips by `.npmignore` rules
no issue
- due to various levels of sub-dependency support across our postcss dependencies we'd ended up with three different versions of postcss installed (6, 7, and 8)
- pinned our dependencies to versions that all use postcss@^7
- we can't upgrade to postcss@8 because we make heavy use of `color-mod` which is no longer in the CSS spec and so the dependency providing it has not been updated
- switched from `postcss-easy-import` to `postcss-import` to drop the postcss@6 sub dependency (we weren't using any of the features that postcss-easy-import added over postcss-import)
- initial tests show CSS compilation times to have roughly halved
- disabled renovate for css dependencies to reduce noise for updates we can't merge
refs https://github.com/TryGhost/Ghost-Admin/pull/1701
- swap `ember-cli-uglify` for `ember-cli-terser` to match ember-cli 3.21.1's generated package.json
- swap `broccoli-uglify-sourcemap` for `broccoli-terser-sourcemap` used manually in our production builds to keep dependencies the same across custom and built-in build artefacts
refs https://github.com/TryGhost/Ghost-Admin/pull/1701
- swap `ember-cli-uglify` for `ember-cli-terser` to match ember-cli 3.21.1's generated package.json
- swap `broccoli-uglify-sourcemap` for `broccoli-terser-sourcemap` used manually in our production builds to keep dependencies the same across custom and built-in build artefacts
no issue
- some styles such as `border: none` inside `.gh-btn-white` were being stripped when ran through `clean-css` leading to visual differences between development and production
- disabled `ember-cli`'s default CSS minification as we already use `cssnano` for minification in our postcss pipeline for both dev and prod builds
no issue
- enables `prefixIds` svgo option to guarantee all `id` attributes are unique across svgs
- disabled `cleanupIds` option so that it doesn't interfere with id uniqueness
- fixes instagram icon background not showing
closes https://github.com/TryGhost/Ghost/issues/10135
- `focusOut` events are fired before the `click` event is fired when clicking buttons whilst an input has focus, this has the effect of triggering our on-blur validations that can cause UI to jump which then results in the `mouseUp` being outside of the button which means no `click` event is fired
- stops `mouseDown` event from bubbling from modal cancel/close buttons so that `focusOut` validations aren't triggered
no issue
- Travis runs all `script` tasks even if an earlier one fails so moved to using `&&` so ember tests aren't run if linting errors
- Added `ember-cli-eslint` to the addons blacklist when building in Travis so that we aren't running linting twice (also reduces build log output)
no issue
- the polyfill is no longer required for latest browsers (tested on Chrome, FF, and Safari)
- Edge may have problems but it's not currently supported
- reduces build size. Before/after:
- `vendor.min.js: 3.29 MB (706 KB gzipped)`
- `vendor.min.js: 3.2 MB (672.92 KB gzipped)`
no issue
- use broccoli-funnel to avoid polluting the `dist/` dir with unused build artefacts
- load codemirror and simplemde CSS up-front to avoid duplicate styles and specificity problems
- pull simplemde dependency out into a separate JS file and lazy-load in `{{gh-simplemde}}` component to reduce main bundle size. Before/after:
- `vendor.min.js 3.58 MB (795.88 KB gzipped)`
- `vendor.min.js 3.32 MB (710.66 KB gzipped)`
refs https://github.com/TryGhost/Ghost/issues/9623
- switch to custom `mobiledoc-kit` build
- fixes top-level elements not being run through parser plugins (https://github.com/bustle/mobiledoc-kit/pull/627)
- fixes <kbd>Alt</kbd> getting stuck and causing <kbd>Backspace</kbd> to delete whole words (https://github.com/bustle/mobiledoc-kit/pull/626)
- fixes error that can occur when a paste results in blank insert (https://github.com/bustle/mobiledoc-kit/pull/620)
- add new `figureToImageCard` parser
- replaces hacky workaround to detect an image+figcaption inside the `imgToCard` parser plugin
- remove wrapping of html in a `<div>...</div>` when pasting
- no longer necessary now that top-level elements are parsed
- fixes rich-text pastes where multiple paragraphs would be collapsed into a single paragraph
refs https://github.com/TryGhost/Ghost/issues/9623
- wrap all embeds in an `<iframe>` so that their scripts are isolated (fixes FB Video)
- add `MutationObserver` implementation to adjust iframe height as embed's content is loaded
- add `noframe.js` to resize embedded iframes such as YouTube videos
no issue
- doing so causes a double pass through asset-rewrite and forces both to take much longer. This cuts 3s off of rebuilds. Using asset-rewrite as is done in dev mode is also suspicious, likely a better setup could be devised that doesnt require rewrite to interop with the local ghost server
