Commit Graph

83 Commits

Author SHA1 Message Date
David Taylor 1fd8f6df5f
PERF: Improve theme stylesheet compilation performance (#12850)
When building the `scss_load_paths`, we were creating a full export of the theme (including uploads), and not cleaning it up. With many uploads, this can be extremely slow (because it downloads every upload from S3), and the lack of cleanup could cause a disk to fill up over time.

This commit updates the ZipExporter to provide a `with_export_dir` API, which takes care of cleanup. It also adds a kwarg which allows exporting only extra_scss fields. This should make things much faster for themes with many uploads.
2021-04-27 14:33:43 +01:00
Osama Sayegh cd24eff5d9
FEATURE: Introduce theme/component QUnit tests (take 2) (#12661)
This commit allows themes and theme components to have QUnit tests. To add tests to your theme/component, create a top-level directory in your theme and name it `test`, and Discourse will save all the files in that directory (and its sub-directories) as "tests files" in the database. While tests files/directories are not required to be organized in a specific way, we recommend that you follow Discourse core's tests [structure](https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/tests).

Writing theme tests should be identical to writing plugins or core tests; all the `import` statements and APIs that you see in core (or plugins) to define/setup tests should just work in themes.

You do need a working Discourse install to run theme tests, and you have 2 ways to run theme tests:

* In the browser at the `/qunit` route. `/qunit` will run tests of all active themes/components as well as core and plugins. The `/qunit` now accepts a `theme_name` or `theme_url` params that you can use to run tests of a specific theme/component like so: `/qunit?theme_name=<your_theme_name>`.

* In the command line using the `themes:qunit` rake task. This take is meant to run tests of a single theme/component so you need to provide it with a theme name or URL like so: `bundle exec rake themes:qunit[name=<theme_name>]` or `bundle exec rake themes:qunit[url=<theme_url>]`.

There are some refactors to how Discourse processes JavaScript that comes with themes/components, and these refactors may break your JS customizations; see https://meta.discourse.org/t/upcoming-core-changes-that-may-break-some-themes-components-april-12/186252?u=osama for details on how you can check if your themes/components are affected and what you need to do to fix them.

This commit also improves theme error handling in Discourse. We will now be able to catch errors that occur when theme initializers are run and prevent them from breaking the site and other themes/components.
2021-04-12 15:02:58 +03:00
Osama Sayegh 2b9ab3a0d9
Revert "FEATURE: Introduce theme/component QUnit tests (#12517)" (#12632)
This reverts commit a53d8d3e61 and 105634435f.

Reverted because the change broke some components. Will be added back in a few days.
2021-04-07 17:45:49 +03:00
Osama Sayegh a53d8d3e61
FEATURE: Introduce theme/component QUnit tests (#12517)
This commit allows themes and theme components to have QUnit tests. To add tests to your theme/component, create a top-level directory in your theme and name it `test`, and Discourse will save all the files in that directory (and its sub-directories) as "tests files" in the database. While tests files/directories are not required to be organized in a specific way, we recommend that you follow Discourse core's tests [structure](https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/tests).

Writing theme tests should be identical to writing plugins or core tests; all the `import` statements and APIs that you see in core (or plugins) to define/setup tests should just work in themes.

You do need a working Discourse install to run theme tests, and you have 2 ways to run theme tests:

* In the browser at the `/qunit` route. `/qunit` will run tests of all active themes/components as well as core and plugins. The `/qunit` now accepts a `theme_name` or `theme_url` params that you can use to run tests of a specific theme/component like so: `/qunit?theme_name=<your_theme_name>`.

* In the command line using the `themes:qunit` rake task. This take is meant to run tests of a single theme/component so you need to provide it with a theme name or URL like so: `bundle exec rake themes:qunit[name=<theme_name>]` or `bundle exec rake themes:qunit[url=<theme_url>]`.

There are some refactors to internal code that's responsible for processing themes/components in Discourse, most notably:

* `<script type="text/discourse-plugin">` tags are automatically converted to modules.

* The `theme-settings` service is removed in favor of a simple `lib` file responsible for managing theme settings. This was done to allow us to register/lookup theme settings very early in our Ember app lifecycle and because there was no reason for it to be an Ember service.

These refactors should 100% backward compatible and invisible to theme developers.
2021-04-07 10:39:57 +03:00
Penar Musaraj 5604ce70d4
DEV: More refactoring of SCSS importers (#12143) 2021-02-19 11:22:24 -05:00
Blake Erickson 395a903cf6
DEV: Show warning message when using ember css selectors (#12036)
* DEV: Show warning message when using ember css selectors

When editing the theme css via the admin UI a warning message
will be displayed if it detects that the `#emberXXX` or `.ember-view`
css selectors are being used. These are dynamic selectors that ember
generates, but they can change so they should not be used.

* Update error message text to be more helpful

* Display a warning instead of erroring out

This allows the theme to still be saved, but a warning is displayed.

Updated the tests to check for the error message.

Updated the pre tags css so that it wraps for long messages.
2021-02-11 13:48:57 -07:00
Penar Musaraj 12ffba771c
FIX: Improve SCSS handling in components (#11963)
- ignores errors when including component SCSS in parent theme
- adds support for SCSS `@import`s in components' `color_definitions.scss` files
2021-02-04 08:51:18 -05:00
Penar Musaraj e8b82724fd
DEV: Refactor theme SCSS compilation (#11919) 2021-02-02 13:09:41 -05:00
Krzysztof Kotlarek 3ea4f36f26
FIX: use sql_fragment instead of sanitize_sql_array (#11460)
This is a follow up to comment under this PR https://github.com/discourse/discourse/pull/11441

Sam suggested using sql_fragment instead of sanitize_sql_array
2020-12-11 10:56:26 +11:00
Bianca Nenciu f9ff51870b
FIX: Rebake theme fields if upload changes (#11341)
Updating SVG sprites of a theme did not take effect immediately because
the cache was not cleared.
2020-11-25 10:49:12 +11:00
Penar Musaraj 882b0aac19
DEV: Let themes extend color definitions (#10429)
Themes can now declare custom colors that get compiled in core's color definitions stylesheet, thus allowing themes to better support dark/light color schemes. 

For example, if you need your theme to use tertiary for an element in a light color scheme and quaternary in a dark scheme, you can add the following SCSS to your theme's `color_definitions.scss` file: 

```
:root {
  --mytheme-tertiary-or-quaternary: #{dark-light-choose($tertiary, $quaternary)};
}
```

And then use the `--mytheme-tertiary-or-quaternary` variable as the color property of that element. You can also use this file to add color variables that use SCSS color transformation functions (lighten, darken, saturate, etc.) without compromising your theme's compatibility with different color schemes.
2020-08-18 13:02:13 -04:00
David Taylor d29d69e10d
FIX: Invalidate database theme cache when hostname changes (#9908)
Hostname can vary per-site on a multisite cluster, so this change requires converting the compiler_version from a constant into a class method which is evaluated at runtime. The value is stored in the theme DistributedCache, so performance impact should be negligible.
2020-05-29 13:04:51 +01:00
Robin Ward 612284cef3
DEV: Remove `Discourse.RAW_TEMPLATES` (#9630)
We were sharing `Discourse` both as an application object and a
namespace which complicated things for Ember CLI. This patch
moves raw templates into `__DISCOURSE_RAW_TEMPLATES` and adds
a couple helper methods to create/remove them.
2020-05-05 12:15:03 -04:00
Krzysztof Kotlarek 9bff0882c3
FEATURE: Nokogumbo (#9577)
* FEATURE: Nokogumbo

Use Nokogumbo HTML parser.
2020-05-05 13:46:57 +10:00
David Taylor a51b8d9c66
FIX: Do not use cached settings during theme compilation
We compile within a database transaction, so using a cached value from redis can cause unwanted side effects
2020-05-04 09:43:06 +01:00
David Taylor 4f885d7da2
FIX: Clear theme caches after database transaction has committed
This was causing unusual side effects on high-traffic sites, where the cache would be rebuilt before the transaction had been committed
2020-05-04 09:42:50 +01:00
David Taylor 8a112b7464
DEV: Automatically extend CSP when themes link to external scripts (#9531) 2020-04-24 09:47:01 +01:00
David Taylor 3814ca06a8
DEV: Allow using .js extension for javascript modules in themes (#9358) 2020-04-06 17:24:59 +01:00
Robin Ward a12c7fcb2f Revert "FIX: Allow JS transpilation"
This reverts commit 6d1263812f.
2020-03-25 16:13:01 -04:00
Robin Ward 6d1263812f FIX: Allow JS transpilation 2020-03-25 16:05:16 -04:00
David Taylor c939001876
DEV: Bump theme compiler version for CSP change
We need to regenerate cached themes, so that the JS paths are updated to include the subfolder prefix

Followup to 8e98f39d9f
2020-03-24 15:52:14 +00:00
Mark VanLandingham 3e89774908
DEV: Use .hbr for raw template file extension (#8883) 2020-02-11 13:38:12 -06:00
Jarek Radosz 53529a3427
DEV: Upgrade Ember to version 3.12.2 (#8753)
* DEV: Use Ember 3.12.2
* Add Ember version to ThemeField's DEPENDENT_CONSTANTS
* DEV: Use `id` instead of `elementId` (See: https://github.com/emberjs/ember.js/issues/18147)
* FIX: Don't leak event listeners (bug introduced in 999e2ff)
2020-02-05 14:51:00 +01:00
David Taylor 5f927ceeb3
DEV: Display a warning when themes hard-code optimized image links (#8304) 2019-11-12 14:30:19 +00:00
David Taylor ee5799805c
FIX: Allow theme translations to be accessed in initializers (#8285)
Previously theme translations were loaded along with other plugin API scripts. These run after pre-initializers and initializers when the app boots. This commit moves theme translation loading into pre-initializers, so their behaviour matches core translations more closely.
2019-11-05 11:54:12 +00:00
Robin Ward eae57652a4 FIX: Bump Compiler Version
In 98719be we fixed raw handlebars, but they won't be recompiled without
this bump.
2019-10-08 14:50:14 -04:00
Krzysztof Kotlarek 427d54b2b0 DEV: Upgrading Discourse to Zeitwerk (#8098)
Zeitwerk simplifies working with dependencies in dev and makes it easier reloading class chains. 

We no longer need to use Rails "require_dependency" anywhere and instead can just use standard 
Ruby patterns to require files.

This is a far reaching change and we expect some followups here.
2019-10-02 14:01:53 +10:00
David Taylor 081c36a459 FIX: Do not include theme variables in plugin SCSS, and fix register_css 2019-09-17 09:54:52 +01:00
David Taylor 98719bee10 FIX: Load raw hbs templates correctly from theme javascripts folder 2019-09-13 18:01:16 +01:00
Joffrey JAFFEUX b3eb67976d
DEV: Upgrades to Ember 3.10 (#7871)
Co-Authored-By: majakomel <maja.komel@gmail.com>
2019-07-16 12:45:15 +02:00
David Taylor 81dcadf788
DEV: Stop compiling themes during DB migration. Recompile on cdn change. (#7676)
This is an improved implementation for bc8b7b13
2019-06-03 16:38:02 +01:00
David Taylor 7500eed4c0
FEATURE: Multi-file javascript support for themes (#7526)
You can now add javascript files under `/javascripts/*` in a theme, and they will be loaded as if they were included in core, or a plugin. If you give something the same name as a core/plugin file, it will be overridden. Support file extensions are `.js.es6`, `.hbs` and `.raw.hbs`.
2019-06-03 10:41:00 +01:00
David Taylor 75fc126224
DEV: Change path for extra scss files in themes (#7664)
The preferred path is `/stylesheets/...`, to match core and plugins. The old `/scss/...` path will continue to function
2019-05-31 15:40:41 +01:00
Osama Sayegh e20c30987c
FEATURE: detect theme errors and catch them (#7589)
* FEATURE: detect theme errors and catch them

* Bump COMPILER_VERSION

* Feedback

* Override eslint no console for one line

* Can't use our ajax method

* remove emoji from translation file
2019-05-24 17:25:55 +03:00
Sam Saffron 30990006a9 DEV: enable frozen string literal on all files
This reduces chances of errors where consumers of strings mutate inputs
and reduces memory usage of the app.

Test suite passes now, but there may be some stuff left, so we will run
a few sites on a branch prior to merging
2019-05-13 09:31:32 +08:00
David Taylor a2ddb6cf2d DEV: Increase max length of theme_field name column
Now that we have custom SCSS files with arbitrary names, it's easy to exceed 30 characters
2019-04-23 12:34:32 +01:00
David Taylor 268d4d4c82
FEATURE: Multiple SCSS file support for themes (#7351)
Theme developers can include any number of scss files within the /scss/ directory of a theme. These can then be imported from the main common/desktop/mobile scss.
2019-04-12 11:36:08 +01:00
Penar Musaraj d6d4a5ba4a FEATURE: support custom icons in themes (#7155)
* First take

* Add support for sprites in themes

Automatically register any custom icons added via themes or plugins

* Fix theme sprite caching

* Simplify test

* Update lib/svg_sprite/svg_sprite.rb

Co-Authored-By: pmusaraj <pmusaraj@gmail.com>

* Fix /svg-sprite/search request
2019-03-15 17:16:15 +11:00
Osama Sayegh 5e58cedfbd
FIX: retranspile theme JS when settings YAML changes (#7131) 2019-03-08 17:49:06 +03:00
Dan Ungureanu f68a7a16a4 FIX: Use field name to name files in theme export. (#7009) 2019-02-27 10:45:22 +01:00
David Taylor a8ffc02d06 PERF: Reduce N+1s on theme admin page 2019-02-26 14:22:02 +00:00
David Taylor 7878e5007a
FIX: Refactor to prevent themes affecting core stylesheets (#7029)
If a theme setting contained invalid SCSS, it would cause an error 500 on the site, with no way to recover. This commit stops loading theme settings in the core stylesheets, and instead only loads the color scheme variables. This change also makes `common/foundation/variables.scss` available to themes without an explicit import.
2019-02-19 15:55:59 +00:00
David Taylor 86fe423f5e FIX: Clear the cache after destroying theme_fields 2019-02-12 16:39:40 +00:00
David Taylor 91f0468f4e FIX: Allow unbaked theme fields to be destroyed
The after_commit hook was attempting to re-bake theme_fields after they were destroyed, which caused an exception to be thrown
2019-02-12 16:14:43 +00:00
David Taylor 95b5c5898e FIX: Prevent duplicate params for raw template theme handlebars helpers 2019-02-08 12:54:00 +00:00
David Taylor f3cfce4a93
FEATURE: Calculate sprite-sheet based on currently active themes (#6973)
Previously there was only one sprite sheet, which always included icons from all themes even if they were disabled
2019-02-06 15:51:23 +00:00
David Taylor a48731e359
FEATURE: Support additional metadata in theme about.json (#6944)
New `about.json` fields (all optional):
 - `authors`: An arbitrary string describing the theme authors
 - `theme_version`: An arbitrary string describing the theme version
 - `minimum_discourse_version`: Theme will be auto-disabled for lower versions. Must be a valid version descriptor.
 - `maximum_discourse_version`: Theme will be auto-disabled for lower versions. Must be a valid version descriptor.

A localized description for a theme can be provided in the language files under the `theme_metadata.description` key

The admin UI has been re-arranged to display this new information, and give more prominence to the remote theme options.
2019-01-25 14:19:01 +00:00
David Taylor afd449089f
FEATURE: Import and export themes in a .tar.gz format (#6916) 2019-01-23 14:40:21 +00:00
David Taylor f40c97c367 Remove support for `theme_var` and `theme_color_var` fields
These are remnants of the old 'customization' system, and have been superseded by theme settings
2019-01-18 12:04:23 +00:00
David Taylor 24b59afe2a FIX: Wrap theme javascript inside IIFE to prevent using global namespace 2019-01-17 14:44:10 +00:00