Skip to content

Commit

Permalink
[CIVIC-1946] Fixed civictheme builds; filenames and imports.
Browse files Browse the repository at this point in the history
- Simplified the watch - removing unnecessary logic.
  • Loading branch information
alan-cole committed Nov 26, 2024
1 parent d296f6a commit b99a2d7
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 43 deletions.
37 changes: 16 additions & 21 deletions web/themes/contrib/civictheme/build.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// phpcs:ignoreFile
/*
Civictheme build - version 0.0.1 (alpha).
Expand Down Expand Up @@ -119,22 +120,24 @@ const DIR_ASSETS_IN = fullPath('./assets/')
const DIR_ASSETS_OUT = fullPath('./dist/assets/')

const COMPONENT_DIR = config.base ? DIR_COMPONENTS_IN : DIR_COMPONENTS_OUT
const STYLE_NAME = config.base ? 'civictheme' : 'styles'
const SCRIPT_NAME = config.base ? 'civictheme' : 'scripts'

const STYLE_FILE_IN = `${COMPONENT_DIR}/style.scss`
const STYLE_VARIABLE_FILE_IN = `${COMPONENT_DIR}/style.css_variables.scss`
const STYLE_THEME_FILE_IN = `${DIR_ASSETS_IN}/sass/theme.scss`
const STYLE_EDITOR_FILE_IN = `${DIR_ASSETS_IN}/sass/theme.editor.scss`
const STYLE_ADMIN_FILE_IN = `${DIR_ASSETS_IN}/sass/theme.admin.scss`
const STYLE_LAYOUT_FILE_IN = `${DIR_ASSETS_IN}/sass/theme.layout.scss`
const STYLE_FILE_OUT = `${DIR_OUT}/styles.css`
const STYLE_EDITOR_FILE_OUT = `${DIR_OUT}/styles.editor.css`
const STYLE_VARIABLE_FILE_OUT = `${DIR_OUT}/styles.variables.css`
const STYLE_ADMIN_FILE_OUT = `${DIR_OUT}/styles.admin.css`
const STYLE_LAYOUT_FILE_OUT = `${DIR_OUT}/styles.layout.css`
const STYLE_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.css`
const STYLE_EDITOR_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.editor.css`
const STYLE_VARIABLE_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.variables.css`
const STYLE_ADMIN_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.admin.css`
const STYLE_LAYOUT_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.layout.css`

const VAR_CT_ASSETS_DIRECTORY = `$ct-assets-directory: '/themes/custom/${THEME_NAME}/dist/assets/';`

const JS_FILE_OUT = `${DIR_OUT}/scripts.js`
const JS_FILE_OUT = `${DIR_OUT}/${SCRIPT_NAME}.js`
const JS_CIVIC_IMPORTS = `${COMPONENT_DIR}/**/!(*.stories|*.component|*.min|*.test|*.script|*.utils).js`
const JS_LIB_IMPORTS = [fullPath('./node_modules/@popperjs/core/dist/umd/popper.js')]
const JS_ASSET_IMPORTS = [
Expand Down Expand Up @@ -165,6 +168,10 @@ function build(options = {}) {
loadStyle(STYLE_FILE_IN, COMPONENT_DIR),
getStyleImport(STYLE_VARIABLE_FILE_IN, COMPONENT_DIR),
getStyleImport(STYLE_THEME_FILE_IN, PATH),
config.base ? [
getStyleImport(STYLE_ADMIN_FILE_IN, PATH),
loadStyle(STYLE_LAYOUT_FILE_IN, PATH),
].join('\n') : ''
].join('\n')

const compiled = sass.compileString(stylecss, { loadPaths: [COMPONENT_DIR, PATH] })
Expand Down Expand Up @@ -246,26 +253,14 @@ if (config.build) {
}

if (config.watch) {
console.log(`Watching: ${path.relative(PATH, DIR_COMPONENTS_IN)}`)
console.log(`Watching: ${path.relative(PATH, DIR_COMPONENTS_IN)}/`)
const supportedExtensions = ['scss', 'js', 'twig']
let lastModified = 0
let timeout = null
const watcher = fs.watch(DIR_COMPONENTS_IN, { recursive: true }, (event, filename) => {
const ext = filename.split('.').pop()
if (supportedExtensions.indexOf(ext) >= 0) {
lastModified = new Date().getTime()
waitToProcess()
clearTimeout(timeout)
timeout = setTimeout(build, 300)
}
})
function waitToProcess() {
const processStart = lastModified
clearTimeout(timeout)
timeout = setTimeout(() => {
// If last modified has changed, wait again.
(processStart !== lastModified) ? waitToProcess() : processWatch()
}, 300)
}
function processWatch () {
build()
}
}
39 changes: 17 additions & 22 deletions web/themes/contrib/civictheme/civictheme_starter_kit/build.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// phpcs:ignoreFile
/*
Civictheme build - version 0.0.1 (alpha).
Expand Down Expand Up @@ -119,22 +120,24 @@ const DIR_ASSETS_IN = fullPath('./assets/')
const DIR_ASSETS_OUT = fullPath('./dist/assets/')

const COMPONENT_DIR = config.base ? DIR_COMPONENTS_IN : DIR_COMPONENTS_OUT
const STYLE_NAME = config.base ? 'civictheme' : 'styles'
const SCRIPT_NAME = config.base ? 'civictheme' : 'scripts'

const STYLE_FILE_IN = `${COMPONENT_DIR}/style.scss`
const STYLE_VARIABLE_FILE_IN = `${COMPONENT_DIR}/style.css_variables.scss`
const STYLE_THEME_FILE_IN = `${DIR_ASSETS_IN}/sass/theme.scss`
const STYLE_EDITOR_FILE_IN = `${DIR_ASSETS_IN}/sass/theme.editor.scss`
const STYLE_ADMIN_FILE_IN = `${DIR_ASSETS_IN}/sass/theme.admin.scss`
const STYLE_LAYOUT_FILE_IN = `${DIR_ASSETS_IN}/sass/theme.layout.scss`
const STYLE_FILE_OUT = `${DIR_OUT}/styles.css`
const STYLE_EDITOR_FILE_OUT = `${DIR_OUT}/styles.editor.css`
const STYLE_VARIABLE_FILE_OUT = `${DIR_OUT}/styles.variables.css`
const STYLE_ADMIN_FILE_OUT = `${DIR_OUT}/styles.admin.css`
const STYLE_LAYOUT_FILE_OUT = `${DIR_OUT}/styles.layout.css`
const STYLE_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.css`
const STYLE_EDITOR_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.editor.css`
const STYLE_VARIABLE_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.variables.css`
const STYLE_ADMIN_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.admin.css`
const STYLE_LAYOUT_FILE_OUT = `${DIR_OUT}/${STYLE_NAME}.layout.css`

const VAR_CT_ASSETS_DIRECTORY = `$ct-assets-directory: '/themes/custom/${THEME_NAME}/dist/assets/';`

const JS_FILE_OUT = `${DIR_OUT}/scripts.js`
const JS_FILE_OUT = `${DIR_OUT}/${SCRIPT_NAME}.js`
const JS_CIVIC_IMPORTS = `${COMPONENT_DIR}/**/!(*.stories|*.component|*.min|*.test|*.script|*.utils).js`
const JS_LIB_IMPORTS = [fullPath('./node_modules/@popperjs/core/dist/umd/popper.js')]
const JS_ASSET_IMPORTS = [
Expand All @@ -150,7 +153,7 @@ function build(options = {}) {
fs.mkdirSync(DIR_OUT)
}

// --------------------------------------------------------------------------- GULP
// --------------------------------------------------------------------------- COMBINED FOLDER
if (config.combine && !config.base) {
runCommand(`rsync -a --delete ${DIR_UIKIT_COMPONENTS_IN}/ ${DIR_UIKIT_COPY_OUT}/`)
runCommand(`rsync -a --delete ${DIR_UIKIT_COPY_OUT}/ ${DIR_COMPONENTS_OUT}/`)
Expand All @@ -165,6 +168,10 @@ function build(options = {}) {
loadStyle(STYLE_FILE_IN, COMPONENT_DIR),
getStyleImport(STYLE_VARIABLE_FILE_IN, COMPONENT_DIR),
getStyleImport(STYLE_THEME_FILE_IN, PATH),
config.base ? [
getStyleImport(STYLE_ADMIN_FILE_IN, PATH),
loadStyle(STYLE_LAYOUT_FILE_IN, PATH),
].join('\n') : ''
].join('\n')

const compiled = sass.compileString(stylecss, { loadPaths: [COMPONENT_DIR, PATH] })
Expand Down Expand Up @@ -246,26 +253,14 @@ if (config.build) {
}

if (config.watch) {
console.log(`Watching: ${path.relative(PATH, DIR_COMPONENTS_IN)}`)
console.log(`Watching: ${path.relative(PATH, DIR_COMPONENTS_IN)}/`)
const supportedExtensions = ['scss', 'js', 'twig']
let lastModified = 0
let timeout = null
const watcher = fs.watch(DIR_COMPONENTS_IN, { recursive: true }, (event, filename) => {
const ext = filename.split('.').pop()
if (supportedExtensions.indexOf(ext) >= 0) {
lastModified = new Date().getTime()
waitToProcess()
clearTimeout(timeout)
timeout = setTimeout(build, 300)
}
})
function waitToProcess() {
const processStart = lastModified
clearTimeout(timeout)
timeout = setTimeout(() => {
// If last modified has changed, wait again.
(processStart !== lastModified) ? waitToProcess() : processWatch()
}, 300)
}
function processWatch () {
build()
}
}

0 comments on commit b99a2d7

Please sign in to comment.