Coder Social home page Coder Social logo

kireerik / refo Goto Github PK

View Code? Open in Web Editor NEW
10.0 2.0 2.0 1.54 MB

A website template for the modern web. ⭐️ Star to support our work!

Home Page: https://kireerik.github.io/refo/

JavaScript 100.00%
static-site build-tool javascript hot-module-replacement resume portfolio landing-pages web web-performance html

refo's People

Contributors

kireerik avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

fossabot upin1506

refo's Issues

Add command line support for the core package

#!/usr/bin/env node
const fs = require('fs')
, path = require('path')

, coreFileName = './refo.core'
, coreFile = path.resolve(fs.realpathSync(process.cwd()), coreFileName)
try {var core = require(coreFile)} catch (error) {}

const index = require('./index')

if (core)
	index(core.handlers, core.options)
else
	module.exports = index

Consider replacing inline-source with custom module extensions once hot-module-replacement supports it.

Alternative way to handle front end JavaScript:

Main handler:

html = await handleHTML(filePath, html)
;(filePath.substring(0, filePath.lastIndexOf('.')) + '.html')
.saveToStaticDirectory(html)

if (typeof html == 'string') {
	html = await handleHTML(filePath, html)

	;(filePath.substring(0, filePath.lastIndexOf('.')) + '.html')
		.saveToStaticDirectory(html)
} else
	filePath.saveToStaticDirectory(html())

Front end JavaScript:

const handleJs = require('frontend-javascript-handler')

module.exports = () => handleJs('../frontEndJavaScriptFileToHandle')

Front end JavaScript handler module:

const path = require('path')

, bundle = require('bundle-js')
, minifyJS = require('uglify-js').minify

module.exports = file => {
	const filePath = path.resolve(file)

	;(() => require(filePath))()

	let js = bundle({entry: filePath, disablebeautify: true})

	for (let i = 1; i <= 2; i++)
		js = minifyJS(js).code

	return js
}

This is not recommended because the filePath needs to be requred as a module even when it is not a module in order to have hot module replacement:

	;(() => require(filePath))()

Requiring it as a string resolves this, but this is currently not supported by hot-module-replacement:

resolve dependency issues (draft)

check with support:

 

 

 

 
resolved with workaround (until there is a better option):

 

 

 

 
implementation in consideration:

, serviceWorker({
	//enableInDevelopment: true
	, workbox: {
		swDest: outDir + '/' + 'main' + '/' + 'cache' + '/' + 'index.js'
	}
})

assetDirectory has 2 meaning

Default usage:

watch(assetDirectory, (event, filePath) => handleSourceChange(filePath))

Required because of inlined sources (svg, css). inline-source

 

asset directory within siteDirectory:

if (filePath.replace(path.resolve(siteDirectory) + path.sep, '').split(path.sep)[0] == assetDirectory) {

Required because of front end JavaScript handling.

 

This could be a feature as well, but it can be also confusing. So it is probably recommended to separate the 2 use cases and have a different assetDirectory variable for front end JavaScript handling.

Update Sublime Text syntax highlighting example

The Examples page recommends the following configuration for JS Custom:

{
  "configurations": {
    "Default": {
      "custom_template_tags": {
        "html": "scope:text.html.basic"
        , "": "scope:text.html.basic"
      }
    }
  }
}

In current versions of JS Custom, custom template options have been expanded. The custom_template_tags option has been deprecated in favor of a custom_templates option with various sub-options:

{
  "configurations": {
    "Default": {
      "custom_templates": {
        "default": "scope:text.html.basic",
        "tags": {
          "html": "scope:text.html.basic"
        }
      }
    }
  }
}

The old suggested configuration using custom_template_tags should still work, but as I recall, using "" as a custom tag was buggy, which is why the new default sub-option exists.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.