javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: svelte and css2json-loader

Browse Source
This commit is contained in:
Igor Randjelovic
2020-11-23 19:13:45 +01:00
parent 00a1cb5fc6
commit 86a46b46cd
4 changed files with 46 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap
View File

@ -20,8 +20,7 @@ exports[`svelte configuration for android 1`] = `
symlinks: true,
alias: {
'~': '<TODO>appFullPath',
'@': '<TODO>appFullPath',
svelte: 'svelte-native'
'@': '<TODO>appFullPath'
},
extensions: [
'.android.svelte',
@ -62,10 +61,7 @@ exports[`svelte configuration for android 1`] = `
sourceMap: true,
declaration: false
},
getCustomTransformers: function () { /* omitted long function */ },
appendTsSuffixTo: [
'\\\\\\\\.svelte$'
]
getCustomTransformers: function () { /* omitted long function */ }
}
}
]
@ -123,19 +119,22 @@ exports[`svelte configuration for android 1`] = `
/* config.module.rule('svelte') */
{
test: /\\\\.svelte$/,
exclude: [
/node_modules/
],
use: [
/* config.module.rule('svelte').use('svelte-loader-hot') */
{
loader: 'svelte-loader-hot',
options: {
dev: false,
dev: true,
preprocess: [
undefined,
{
markup: function () { /* omitted long function */ }
}
],
hotReload: false,
hotReload: true,
hotOptions: {
injectCss: false,
'native': true
@ -258,8 +257,7 @@ exports[`svelte configuration for ios 1`] = `
symlinks: true,
alias: {
'~': '<TODO>appFullPath',
'@': '<TODO>appFullPath',
svelte: 'svelte-native'
'@': '<TODO>appFullPath'
},
extensions: [
'.ios.svelte',
@ -300,10 +298,7 @@ exports[`svelte configuration for ios 1`] = `
sourceMap: true,
declaration: false
},
getCustomTransformers: function () { /* omitted long function */ },
appendTsSuffixTo: [
'\\\\\\\\.svelte$'
]
getCustomTransformers: function () { /* omitted long function */ }
}
}
]
@ -361,19 +356,22 @@ exports[`svelte configuration for ios 1`] = `
/* config.module.rule('svelte') */
{
test: /\\\\.svelte$/,
exclude: [
/node_modules/
],
use: [
/* config.module.rule('svelte').use('svelte-loader-hot') */
{
loader: 'svelte-loader-hot',
options: {
dev: false,
dev: true,
preprocess: [
undefined,
{
markup: function () { /* omitted long function */ }
}
],
hotReload: false,
hotReload: true,
hotOptions: {
injectCss: false,
'native': true

46
packages/webpack5/src/configuration/svelte.ts
View File

@ -1,9 +1,10 @@
import base from './base';
import { env as _env, IWebpackEnv } from '../index';
import Config from 'webpack-chain';
import { getPlatform, getProjectRootPath } from '../helpers/project';
import { merge } from 'webpack-merge';
import svelteNativePreprocessor from 'svelte-native-preprocessor';
import Config from 'webpack-chain';
import { env as _env, IWebpackEnv } from '../index';
import { getPlatform, getProjectRootPath } from '../helpers/project';
import base from './base';
import { error } from '../helpers/log';
export default function (config: Config, env: IWebpackEnv = _env): Config {
base(config, env);
@ -20,46 +21,39 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
config.module
.rule('svelte')
.test(/\.svelte$/)
.exclude.add(/node_modules/)
.end()
.use('svelte-loader-hot')
.loader('svelte-loader-hot')
.tap((options) => {
return {
...options,
dev: production,
preprocess: [getSvelteConfig()?.preprocess, svelteNativePreprocessor()],
hotReload: production,
dev: !production,
preprocess: [getSvelteConfigPreprocessor(), svelteNativePreprocessor()],
hotReload: !production,
hotOptions: {
injectCss: false,
native: true,
},
};
})
.end();
// set up ts support in svelte files
config.module
.rule('ts')
.use('ts-loader')
.loader('ts-loader')
.tap((options = {}) => {
return merge(options, {
appendTsSuffixTo: ['\\.svelte$'],
});
});
// add an alias for svelte, since some plugins may try to import it
config.resolve.alias.set('svelte', 'svelte-native');
return config;
}
function getSvelteConfig(): { preprocess: any } | null {
function getSvelteConfigPreprocessor(): any {
const config = getSvelteConfig();
return config?.preprocess;
}
function getSvelteConfig(): { preprocess: any } | undefined {
try {
const resolvedPath = require.resolve(`./svelte.config.js`, {
paths: [getProjectRootPath()],
});
return require(resolvedPath);
} catch (e) {
return null;
} catch (err) {
error('Could not find svelte.config.js.', err);
}
}

3
packages/webpack5/src/configuration/vue.ts
View File

@ -26,8 +26,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
...options,
compiler: require('nativescript-vue-template-compiler'),
};
})
.end();
});
// set up ts support in vue files
config.module

22
packages/webpack5/src/loaders/css2json-loader/index.ts
View File

@ -16,20 +16,11 @@ export default function loader(content: string, map: any) {
// todo: revise if this is necessary
// todo: perhaps use postCSS and just build imports into a single file?
let dependencies = [];
getImportRules(ast)
getAndRemoveImportRules(ast)
.map(extractUrlFromRule)
.map(createRequireUri)
.forEach(({ uri, requireURI }) => {
dependencies.push(
`global.registerModule("${uri}", () => require("${requirePrefix}${requireURI}"));`
);
// Call registerModule with requireURI to handle cases like @import "~@nativescript/theme/css/blue.css";
if (uri !== requireURI) {
dependencies.push(
`global.registerModule("${requireURI}", () => require("${requirePrefix}${requireURI}"));`
);
}
dependencies.push(`require("${requirePrefix}${requireURI}")`);
});
const str = JSON.stringify(ast, (k, v) => (k === 'position' ? undefined : v));
@ -60,6 +51,15 @@ function getImportRules(ast: Stylesheet): Import[] {
);
}
function getAndRemoveImportRules(ast: Stylesheet): Import[] {
const imports = getImportRules(ast);
ast.stylesheet.rules = ast.stylesheet.rules.filter(
(rule) => rule.type !== 'import'
);
return imports;
}
/**
* Extracts the url from import rule (ex. `url("./platform.css")`)
*/